"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  slug: string;
  createdAt: string;
  createdByName: string;
  customCreatorName: string;
  thumbnailUrl: string;
  categories: { title: string }[];
  files: { fileUrl: string; file_alt: string }[];
};

export default function Header() {
  const [articles, setArticles] = useState<Article[]>([]);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
        const req = {
          limit: "5", // tampilkan 5 artikel seperti data dummy sebelumnya
          page: 1,
          search: "",
          categorySlug: "",
          sort: "desc",
          isPublish: true,
          sortBy: "created_at",
        };

        const res = await getListArticle(req);
        setArticles(res?.data?.data || []);
      } catch (err) {
        console.error("Error fetching articles:", err);
      }
    };

    fetchArticles();
  }, []);

  return (
    <section className="px-4 py-8 bg-white">
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-1 max-w-[1350px] mx-auto">
        {articles.map((article) => {
          const imageUrl =
            article.thumbnailUrl ||
            article.files?.[0]?.fileUrl ||
            "/placeholder.jpg"; // fallback jika gambar tidak ada

          const category =
            article.categoryName ||
            article.categories?.[0]?.title ||
            "SUARA WARGA";

          // Format tanggal dari createdAt
          const date = new Date(article.createdAt).toLocaleDateString("id-ID", {
            day: "numeric",
            month: "long",
            year: "numeric",
          });

          return (
            <div key={article.id}>
              <Link
                className="border border-gray-200 overflow-hidden shadow-sm bg-white h-[440px]"
                href={`/details/${article?.slug}`}
              >
                <Image
                  src={imageUrl}
                  alt={article.title}
                  width={267}
                  height={191}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4 text-center">
                  <p className="text-xs text-gray-400 font-medium tracking-wider uppercase py-2">
                    {category}
                  </p>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4 leading-snug px-9">
                    {article.title}
                  </h3>
                  <p className="text-xs text-gray-400">{date}</p>
                </div>
              </Link>
            </div>
          );
        })}
      </div>
    </section>
  );
}