import Link from "next/link";
import { BlogCoverImage } from "@/components/BlogCoverImage";
import { getBlogCoverImage, getBlogs } from "@/lib/api";

export async function BlogSection() {
  let posts: Awaited<ReturnType<typeof getBlogs>>["items"] = [];

  try {
    const data = await getBlogs({ page: 1, pageSize: 6 });
    posts = data.items;
  } catch {
    posts = [];
  }

  if (posts.length === 0) return null;

  return (
    <section id="blog" className="border-t border-line/60 py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="reveal mb-14 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <h2 className="max-w-[16em] text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal leading-snug tracking-tight text-ink">
              رشدنامه، آموزشی و انگیزشی
            </h2>
            <p className="latin title-en text-muted">
              Our Blog
            </p>
          </div>
          <div className="flex flex-col items-start gap-3 md:items-end">
            <p className="max-w-sm text-sm text-muted">
              با محتوای مشکی همیشه به‌روز باشید.
            </p>
            <Link href="/blog" className="link-hover text-sm text-ink-soft">
              مشاهده همه مقالات
            </Link>
          </div>
        </div>

        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {posts.map((post, index) => {
            const image = getBlogCoverImage(post);

            return (
              <article
                key={post.id}
                className={`reveal group ${
                  index % 3 === 1
                    ? "reveal-delay-1"
                    : index % 3 === 2
                      ? "reveal-delay-2"
                      : ""
                }`}
              >
                <Link href={`/blog/${post.slug}`} className="block">
                  <div className="relative mb-4 overflow-hidden rounded-2xl">
                    <BlogCoverImage src={image} alt={post.title} />
                  </div>
                  <h3 className="group-text-hover mb-2 line-clamp-2 text-lg font-normal leading-8 text-ink">
                    {post.title}
                  </h3>
                  {post.abstract ? (
                    <p className="text-sm leading-7 text-muted">
                      {post.abstract}
                    </p>
                  ) : null}
                </Link>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}