"use client";

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

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

export default function PopularNews() {
  const [popularNews, setPopularNews] = useState<Article[]>([]);
  const [showData, setShowData] = useState("5");

  useEffect(() => {
    fetchPopularNews();
  }, []);

  async function fetchPopularNews() {
    try {
      const res = await getListArticle({
        limit: showData,
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      });

      setPopularNews(res?.data?.data || []);
    } catch (err) {
      console.error("Gagal load berita populer:", err);
    }
  }

  return (
    <section className="w-full px-4 md:px-12 ">
      <div className="max-w-screen-xl mx-auto">
        <div className="flex flex-row items-center">
          <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
          <h2 className="text-center text-lg font-semibold py-3">
            BERITA POPULER
          </h2>
          <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
        </div>

        <div className="mt-6 space-y-2">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
            {popularNews.slice(0, 3).map((news) => (
              <div
                key={news.id}
                className="relative h-[358px] group overflow-hidden"
              >
                <Image
                  src={news.thumbnailUrl || "/dummy.jpg"}
                  alt={news.title}
                  width={361}
                  height={358}
                  className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
                  <p className="text-xl font-serif font-medium">{news.title}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2">
            {popularNews.slice(3).map((news) => (
              <div
                key={news.id}
                className="relative h-[267px] group overflow-hidden"
              >
                <Image
                  src={news.thumbnailUrl || "/dummy.jpg"}
                  alt={news.title}
                  width={500}
                  height={267}
                  className="w-full h-[267px] object-cover transition-transform duration-300 group-hover:scale-105"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
                  <p className="text-xl font-serif font-medium">{news.title}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Banner */}
      <div className="relative mt-5 mb-14 max-w-screen-xl h-[125px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-cover"
        />
      </div>
    </section>
  );
}