import { Placeholder } from "@/components/ui/Placeholder";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { Carousel } from "@/components/ui/Carousel";
import { blogPosts } from "@/data/sample";

export function BlogCarousel() {
  return (
    <section className="py-10 md:py-14">
      <div className="mx-auto max-w-7xl px-4">
        <SectionTitle
          title="آخرین مطالب وبلاگ"
          enTitle="Latest Blog"
          action="وبلاگ"
        />
        <Carousel ariaLabel="کاروسل وبلاگ">
          {blogPosts.map((post) => (
            <article
              key={post.id}
              className="w-[280px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[300px]"
            >
              <Placeholder
                src={post.image}
                alt={post.title}
                width="100%"
                height="160px"
                label="300×160"
                className="w-full rounded-none border-0 border-b border-dashed"
              />
              <div className="p-4">
                <div className="mb-2 flex items-center gap-2 text-[11px] text-muted">
                  <span>{post.date}</span>
                  <span>•</span>
                  <span>{post.readTime} مطالعه</span>
                </div>
                <h3 className="mb-2 line-clamp-2 text-sm font-bold leading-relaxed">
                  {post.title}
                </h3>
                <p className="line-clamp-2 text-xs leading-relaxed text-muted">
                  {post.excerpt}
                </p>
                <button
                  type="button"
                  className="mt-3 text-xs font-medium text-red transition-colors hover:text-red-dark"
                >
                  ادامه مطلب ←
                </button>
              </div>
            </article>
          ))}
        </Carousel>
      </div>
    </section>
  );
}