import Image from "next/image";
import Link from "next/link";
import { listBlogs } from "@/lib/meshkee/api";
import { formatDate } from "@/lib/meshkee/format";
import { blogHref } from "@/lib/meshkee/urls";

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

export const metadata = {
  title: "مجله دکوراسیون | مبلمان هومت",
  description: "مقالات و راهنمای خرید مبلمان و دکوراسیون از مبلمان هومت",
};

export default async function BlogPage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number(params.page) || 1);
  const data = await listBlogs({ page, pageSize: 12 });

  return (
    <main className="container">
      <section className="page-hero">
        <p className="eyebrow">Blog</p>
        <h1>مجله دکوراســـــــــیون</h1>
        <p>راهنماها و مقالات تخصصی برای انتخاب بهتر مبلمان و چیدمان خانه.</p>
      </section>

      <section className="section blog-grid-section">
        {data.items.length === 0 ? (
          <p className="empty-note">مقاله‌ای برای نمایش وجود ندارد.</p>
        ) : (
          <div className="blog-grid">
            {data.items.map((post) => (
              <Link key={post.id} href={blogHref(post.id, post.title)} className="blog-card">
                <div className="blog-card-media">
                  {post.titleImageUrl ? (
                    <Image
                      src={post.titleImageUrl}
                      alt={post.title}
                      width={640}
                      height={420}
                    />
                  ) : (
                    <div className="store-card-fallback" />
                  )}
                </div>
                <div className="blog-card-body">
                  <time>{formatDate(post.publishedAt || post.createdAt)}</time>
                  <h2>{post.title}</h2>
                  {post.abstract ? <p>{post.abstract}</p> : null}
                </div>
              </Link>
            ))}
          </div>
        )}

        {data.total > data.pageSize ? (
          <div className="pager">
            {page > 1 ? <Link href={`/blog?page=${page - 1}`}>قبلی</Link> : null}
            <span className="ltr-number" dir="ltr" lang="en">
              {page}
            </span>
            {page * data.pageSize < data.total ? (
              <Link href={`/blog?page=${page + 1}`}>بعدی</Link>
            ) : null}
          </div>
        ) : null}
      </section>
    </main>
  );
}