web-milenial-bersuara/components/landing-page/more-news.tsx

"use client";
import { getListArticle } from "@/service/article";
import { Timer } from "lucide-react";
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;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    file_url: string;
    file_alt: string;
  }[];
};

const MoreNews = () => {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [articles, setArticles] = useState<Article[]>([]);
  const [showData, setShowData] = useState("4");
  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() {
    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);
    } catch (err) {
      console.error("Error fetching articles:", err);
    }
  }
  return (
    <section className="max-w-7xl mx-auto py-16 bg-white">
      <h2 className="text-xl font-semibold mb-6 border-b pb-2 relative">
        More News{" "}
        <span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
      </h2>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((item) => (
          <div key={item?.id} className="space-y-2">
            <Link className="space-y-2" href={`/detail/${item?.id}`}>
              <div className="relative">
                <Image
                  src={item.thumbnailUrl}
                  alt={item.title}
                  width={400}
                  height={250}
                  className="w-full h-48 object-cover rounded-md"
                />
                <span className="absolute bottom-2 left-2 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">
                  {item.categories?.[0]?.title}
                </span>
              </div>
              <h3 className="text-sm font-semibold leading-snug hover:text-teal-600 cursor-pointer">
                {item.title}
              </h3>
              <p className="text-gray-500 text-xs flex items-center gap-1">
                <Timer className="text-teal-600" size={15} />
                {item.createdAt}
              </p>
            </Link>
          </div>
        ))}
      </div>

      <div className="mt-10 flex items-center justify-center gap-4">
        {/* Garis Kiri */}
        <div className="h-px bg-gray-300 flex-1" />

        {/* Tombol */}
        <button className="px-6 py-2 border border-gray-300 rounded text-sm hover:bg-gray-100 transition">
          LOAD MORE
        </button>

        {/* Garis Kanan */}
        <div className="h-px bg-gray-300 flex-1" />
      </div>
      <div className="max-w-7xl relative my-5  h-[125px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-cover"
        />
      </div>
    </section>
  );
};

export default MoreNews;