kontenhumas-fe/components/main/publication-card.tsx

"use client";

import { useState } from "react";
import PublicationKlFilter from "./publication-filter";
import { Button } from "@/components/ui/button";
import { label } from "framer-motion/client";
import image from "next/image";
import { title } from "process";
import category from "../landing-page/category";

const dummyData = [
  {
    id: 1,
    image: "/edy.png",
    label: "MPR",
    category: "GIAT PIMPINAN",
    date: "06 Juli 2025 14:00 WIB",
    title:
      "Harapan Eddy Soeparno untuk Calon Dubes: Menjadi Jubir EBT dan Ekonomi",
    description:
      "Komisi I DPR RI menggelar fit and proper test calon duta besar...",
  },
  {
    id: 2,
    image: "/bukit.png",
    label: "POLRI",
    category: "GIAT HUMANIS POLRI",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Sedikit Demi Sedikit Lama-lama Jadi Bukit: Infaq Rutin untuk Ringankan...",
    description:
      "Paser - Satuan Brimob Polda Kaltim Kompi 2 Batalyon C Pelopor...",
  },
  {
    id: 3,
    image: "/orientasi.png",
    label: "KEJAKSAAN AGUNG",
    category: "KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title: "Penekanan Pencegahan Korupsi Dalam Kegiatan Orientasi Kepemimpinan",
    description: "Jakarta - Jaksa Agung Republik Indonesia, ST Burhanuddin...",
  },
  {
    id: 4,
    image: "/ketua-dpr.png",
    label: "DPR",
    category: "GIAT PIMPINAN",
    date: "06 Juli 2025 14:00 WIB",
    title: "Ketua DPR: Semoga Danantara Bisa Gerakkan Ekonomi Nasional",
    description:
      "PARLEMENTARIA, Jakarta - Ketua DPR RI Puan Maharani menghadiri peluncuran Badan",
  },
  {
    id: 5,
    image: "/orientasi.png",
    label: "KPK",
    category: "GIAT HUMANIS POLRI",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Penekanan Pencegahan Korupsi Dalam Kegiatan Orientasi Kepemimpinan Kepala Daerah dan Wakil Kepala Daerah Tahun 2025",
    description:
      "Komisi Pemberantasan Korupsi (KPK) terus menanamkan nilai-nilai integritas sejak usia di",
  },
  {
    id: 6,
    image: "/dody.png",
    label: "PUPR",
    category: "KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Pastikan Kesiapan Mudik Lebaran 2025, Menteri Dody Tinjau Jalur Pantura Jateng",
    description:
      "Jakarta – Menteri Pekerjaan Umum Dody Hanggodo meninjau perbaikan jalan di Jalur P",
  },
  {
    id: 7,
    image: "/donor.png",
    label: "MAHKAMAH AGUNG",
    category: "GIAT PIMPINAN",
    date: "06 Juli 2025 14:00 WIB",
    title:
      "KETUA MA: DONOR DARAH ADALAH KONTRIBUSI NYATA IKAHI BAGI KEHIDUPAN MANUSIA",
    description:
      "Jakarta – Humas: Ketua Mahkamah Agung (MA) Prof. Dr. H. Sunarto, S.H., M.H. membuk",
  },
  {
    id: 8,
    image: "/wamen.png",
    label: "PUPR",
    category: "GIAT HUMANIS POLRI",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Bertemu Vice Minister for Engineering Affairs MLIT, Wamen Diana Bahas Penguatan Kerja Sama Infrastruktur dengan Jepang",
    description:
      "Jakarta - Wakil Menteri Pekerjaan Umum (PU) Diana Kusumastuti bertemu dengan Vice Mini",
  },
  {
    id: 9,
    image: "/korupsi.png",
    label: "KPK",
    category: "KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "KPK-UNODC Gelar Pelatihan, Perkuat Investigasi Korupsi Lintas Negara",
    description:
      "Korupsi lintas negara dan pencucian uang masih menjadi tantangan besar bagi aparat penegak",
  },
  {
    id: 10,
    image: "/bansos.jpg",
    label: "POLRI",
    category: "LIPUTAN KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title: "Kapolri dan Panglima TNI Bagikan Ribuan Bansos Jelang Ramadan",
    description:
      "Jakarta. Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo memberikan bantuan sosial dal...",
  },
  {
    id: 11,
    image: "/pengecer.jpg",
    label: "POLRI",
    category: "GIAT PIMPINAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Personel Diterjunkan Hingga ke Pengecer, Jamin Stabilnya Harga Sembako Saat Ramadan",
    description:
      "Jakarta – Kapolri Jenderal Listyo Sigit Prabowo menegaskan komitmen Polri dalam...",
  },
  {
    id: 12,
    image: "/odgj.jpg",
    label: "POLRI",
    category: "UNGKAP KASUS",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Heroik, Petugas Patroli Selamatkan ODGJ Nyaris Terlindas di Tol Japek",
    description:
      "Bekasi– Anggota Patroli Jalan Raya (PJR) Cikampek, Aipda Agus Salim, berhasil menyel....",
  },
  {
    id: 13,
    image: "/madiun.jpg",
    label: "POLRI",
    category: "LIPUTAN KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Dukung Ketahanan Pangan, Mahasiswa Madiun Terima Penghargaan dari Kapolri",
    description:
      "Madiun - Dalam rangka mendukung program Ketahanan Pangan, Polri secara serentak mel..",
  },
  {
    id: 14,
    image: "/ramadhan.jpg",
    label: "POLRI",
    category: "GIAT HUMAS POLRI",
    date: "02 Feb 2024 14:00 WIB",
    title: "Harga Pangan Sesuai HET Saat Ramadan",
    description:
      "Jakarta – Kapolri Jenderal Polisi Listyo Sigit Prabowo menghadiri rapat koordinasi (rakor) t",
  },
  {
    id: 15,
    image: "/one-way.png",
    label: "POLRI",
    category: "LIPUTAN KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "Korlantas Matangkan Kesiapan Rekayasa One Way di Tol Jateng untuk Mudik Lebaran 2025",
    description:
      "Jakarta. Kakorlantas Irjen Pol. Agus Suryo Nugroho berkoordinasi dengan Polda Jateng d...",
  },
  {
    id: 16,
    image: "/tni.jpg",
    label: "POLRI",
    category: "LIPUTAN KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "  Pasca Putusan MK, Personel Solid Bersinergi Jaga Keamanan di Puncak Jaya",
    description:
      "JPuncak Jaya – Personel gabungan TNI-Polri terus solid bersinergi guna menghadirkan kea",
  },
  {
    id: 17,
    image: "/kediri.jpg",
    label: "POLRI",
    category: "LIPUTAN KEGIATAN",
    date: "02 Feb 2024 14:00 WIB",
    title:
      "  Kediri– Kakorlantas Polri Irjen Pol Agus Suryonugroho menerima paparan dari Kasatla",
    description:
      "JPuncak Jaya – Personel gabungan TNI-Polri terus solid bersinergi guna menghadirkan kea",
  },
];

const itemsPerPage = 9;

type PublicationCardGridProps = {
  selectedCategory: string;
};

export default function PublicationCardGrid({
  selectedCategory,
}: PublicationCardGridProps) {
  const [currentPage, setCurrentPage] = useState(1);

  const filteredData =
    selectedCategory === "SEMUA"
      ? dummyData
      : dummyData.filter((item) => item.label === selectedCategory);

  const itemsPerPage = 9;
  const totalPages = Math.ceil(filteredData.length / itemsPerPage);

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentItems = filteredData.slice(startIndex, endIndex);

  const goToPage = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <div className="space-y-6">
      {/* Grid Card */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {currentItems.map((item, idx) => (
          <PublicationKlFilter key={idx} {...item} />
        ))}
      </div>

      {/* Pagination */}
      <div className="flex justify-center gap-2">
        {Array.from({ length: totalPages }, (_, i) => (
          <Button
            key={i}
            variant={currentPage === i + 1 ? "default" : "outline"}
            size="sm"
            onClick={() => goToPage(i + 1)}
          >
            {i + 1}
          </Button>
        ))}
      </div>
    </div>
  );
}