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

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

export default function Header() {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [articles, setArticles] = useState<Article[]>([]);
  const [showData, setShowData] = useState("5");
  const [search, setSearch] = useState("");
  const [selectedCategories, setSelectedCategories] = useState<any>("");
  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  useEffect(() => {
    initState();
  }, [page, showData, startDateValue, selectedCategories]);

  async function initState() {
    // loading();
    const req = {
      limit: showData,
      page,
      search,
      categorySlug: Array.from(selectedCategories).join(","),
      sort: "desc",
      isPublish: true,
      sortBy: "created_at",
    };

    try {
      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
      setTotalPage(res?.data?.meta?.totalPage || 1);
    } finally {
      // close();
    }
  }
  return (
    <section className="px-4 py-4 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, index) => (
          <div
            key={index}
            className="border border-gray-200 overflow-hidden shadow-sm bg-white h-[440px]"
          >
            <Link href={`/details/${article?.slug}`}>
              <Image
                src={article.thumbnailUrl}
                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">
                  {article?.categories?.[0]?.title || "TANPA KATEGORI"}
                </p>
                <h3 className="text-lg font-semibold text-gray-900 mb-4 leading-snug px-8">
                  {article.title}
                </h3>
                <p className="text-xs text-gray-400">
                  {" "}
                  {new Date(article.createdAt).toLocaleDateString("id-ID", {
                    day: "2-digit",
                    month: "long",
                    year: "numeric",
                  })}
                </p>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </section>
  );
}