import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { BlogCard } from "@/components/blog/blog-card";
import { getAllPosts } from "@/lib/blog";

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://meezi.ir";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("blogTitle"),
    description: t("blogDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/blog`,
      languages: { fa: `${BASE_URL}/fa/blog`, en: `${BASE_URL}/en/blog` },
    },
    openGraph: { title: t("blogTitle"), description: t("blogDesc"), url: `${BASE_URL}/${locale}/blog` },
  };
}

export default async function BlogPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "blog" });
  const posts = getAllPosts(locale as "fa" | "en");

  return (
    <>
      <Navbar />
      <main className="pt-16">
        {/* Header */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 py-20 text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold text-white/80">
            {t("badge")}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">{t("title")}</h1>
          <p className="mt-3 text-lg text-white/60">{t("subtitle")}</p>
        </div>

        {/* Posts */}
        <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
          {posts.length === 0 ? (
            <p className="text-center text-gray-400">{t("noPosts")}</p>
          ) : (
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {posts.map((post) => (
                <BlogCard key={post.slug} post={post} />
              ))}
            </div>
          )}
        </section>
      </main>
      <Footer />
    </>
  );
}
