"use client";

import { useRef } from "react";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { blogs as sampleBlogs } from "@/lib/data";
import { blogHref, blogImage, type BlogPost } from "@/lib/blog";
import { formatFaDate } from "@/lib/format";

export function BlogCarousel({ posts }: { posts?: BlogPost[] }) {
  const scroller = useRef<HTMLDivElement>(null);
  const list =
    posts && posts.length
      ? posts.map((post) => ({
          id: post.id,
          title: post.title,
          excerpt: post.abstract || "",
          date: formatFaDate(post.publishedAt || post.createdAt),
          image: blogImage(post),
          href: blogHref(post),
        }))
      : sampleBlogs.map((post) => ({
          ...post,
          href: "/blog",
        }));

  return (
    <section id="blog" className="pt-10">
      <Container>
        <div className="mb-4 flex items-center justify-between">
          <div>
            <h2 className="text-[18px] font-bold text-navy">آخرین مطالب مجله سلامت</h2>
            <p className="mt-1 text-[13px] text-muted">نکته‌های کاربردی از داروسازان داروخانه</p>
          </div>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => scroller.current?.scrollBy({ left: 320, behavior: "smooth" })}
              className="grid size-9 place-items-center rounded-full border border-line bg-white"
              aria-label="قبلی"
            >
              <ChevronRight className="size-4" />
            </button>
            <button
              type="button"
              onClick={() => scroller.current?.scrollBy({ left: -320, behavior: "smooth" })}
              className="grid size-9 place-items-center rounded-full border border-line bg-white"
              aria-label="بعدی"
            >
              <ChevronLeft className="size-4" />
            </button>
            <Link href="/blog" className="hidden text-[13px] text-primary sm:block">
              مشاهده همه
            </Link>
          </div>
        </div>
        <div ref={scroller} className="no-scrollbar flex snap-x gap-4 overflow-x-auto">
          {list.map((post) => (
            <article key={post.id} className="w-[280px] shrink-0 snap-start overflow-hidden rounded-2xl bg-white sm:w-[320px]">
              <Link href={post.href} className="block overflow-hidden bg-sky">
                <Placeholder src={post.image} className="aspect-[16/10] w-full object-cover" />
              </Link>
              <div className="p-4">
                <p className="text-[12px] text-muted">{post.date}</p>
                <h3 className="mt-2 text-[14px] font-bold leading-7 text-navy">
                  <Link href={post.href}>{post.title}</Link>
                </h3>
                <p className="mt-2 line-clamp-2 text-[12.5px] leading-6 text-muted">{post.excerpt}</p>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}