import type { Metadata } from "next";
import Link from "next/link";
import { Media } from "@/components/Media";
import { PageHero } from "@/components/PageHero";
import { Pagination } from "@/components/Pagination";
import { getBlogs } from "@/lib/api";
import { mapBlog } from "@/lib/mappers";
import { SITE } from "@/lib/site";

export const metadata: Metadata = {
  title: `وبلاگ | ${SITE.nameFa}`,
  description: "مقالات کوهنوردی، کمپینگ و راهنمای خرید لوازم ورزشی از سالار استور",
  alternates: { canonical: "/blog" },
};

type Props = {
  searchParams: Promise<{ page?: string }>;
};

export default async function BlogPage({ searchParams }: Props) {
  const { page: pageParam } = await searchParams;
  const page = Math.max(1, Number(pageParam) || 1);
  let data: Awaited<ReturnType<typeof getBlogs>> = { items: [], total: 0, page, pageSize: 12 };
  try {
    data = await getBlogs({ page, pageSize: 12 });
  } catch {
    data = { items: [], total: 0, page, pageSize: 12 };
  }
  const posts = data.items.map(mapBlog);

  return (
    <>
      <PageHero title="وبلاگ سالار استور" english="Blog" />
      <section className="container-site py-10 md:py-14">
        {posts.length ? (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {posts.map((post) => (
              <Link
                key={post.id || post.slug}
                href={post.href || `/blog/${post.slug}`}
                className="overflow-hidden rounded-2xl border border-black/5 bg-white hover:border-brand/40"
              >
                <Media src={post.image} alt={post.title} className="aspect-[16/10]" sizes="400px" />
                <div className="p-4">
                  <time className="text-xs text-zinc-400">{post.date}</time>
                  <h2 className="mt-2 text-base font-bold leading-8 line-clamp-2">{post.title}</h2>
                  {post.abstract ? (
                    <p className="mt-1 text-sm leading-7 text-zinc-500 line-clamp-2">{post.abstract}</p>
                  ) : null}
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <p className="py-16 text-center text-sm text-zinc-500">مقاله‌ای یافت نشد.</p>
        )}
        <Pagination
          page={data.page}
          pageSize={data.pageSize}
          total={data.total}
          makeHref={(nextPage) => (nextPage > 1 ? `/blog?page=${nextPage}` : "/blog")}
        />
      </section>
    </>
  );
}