qudoco-fe/components/landing-page/content-popular.tsx

"use client";

import Image from "next/image";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";

const data = [
  {
    id: 1,
    image: "/image/bharatu.jpg",
    category: "POLRI",
    categoryColor: "bg-red-600",
    tag: "SEPUTAR PRESTASI",
    date: "02 Februari 2024",
    title:
      "Bharatu Mardi Hadji Gugur Saat Bertugas, Diganjar Kenaikan Pangkat Luar Biasa",
  },
  {
    id: 2,
    image: "/image/novita2.png",
    category: "DPR",
    categoryColor: "bg-yellow-500",
    tag: "BERITA KOMISI 7",
    date: "02 Februari 2024",
    title: "Novita Hardini: Jangan Sampai Pariwisata Meminggirkan Warga Lokal",
  },
  {
    id: 3,
    image: "/dummy/news-3.jpg",
    category: "MPR",
    categoryColor: "bg-yellow-600",
    tag: "KEGIATAN EDUKASI",
    date: "02 Februari 2024",
    title:
      "Lestari Moerdijat: Butuh Afirmasi dan Edukasi untuk Dorong Perempuan Aktif di Dunia Politik",
  },
  {
    id: 4,
    image: "/dummy/news-2.jpg",
    category: "MAHKAMAH AGUNG",
    categoryColor: "bg-yellow-700",
    tag: "HOT NEWS",
    date: "02 Februari 2024",
    title: "SEKRETARIS MAHKAMAH AGUNG LANTIK HAKIM TINGGI PENGAWAS",
  },
];

export default function ContentLatest() {
  return (
    <section className="py-20">
      <div className="container mx-auto px-6">
        {/* ===== HEADER ===== */}
        <div className="flex flex-col items-center mb-12">
          <h2 className="text-3xl font-bold mb-6">Konten Terpopuler</h2>

          <Tabs defaultValue="audio-visual" className="w-full">
            {/* Tabs + Explore */}
            <div className="relative w-full pb-3 ">
              {/* Tabs Center */}
              <div className="flex justify-center">
                <TabsList className="bg-transparent p-0 gap-8" variant={"line"}>
                  <TabsTrigger
                    value="audio-visual"
                    className="data-[state=active]:text-[#b07c18] px-0 pb-2"
                  >
                    Audio Visual
                  </TabsTrigger>
                  <TabsTrigger
                    value="audio"
                    className="data-[state=active]:text-[#b07c18] px-0 pb-2"
                  >
                    Audio
                  </TabsTrigger>
                  <TabsTrigger
                    value="foto"
                    className="data-[state=active]:text-[#b07c18] px-0 pb-2"
                  >
                    Foto
                  </TabsTrigger>
                  <TabsTrigger
                    value="teks"
                    className="data-[state=active]:text-[#b07c18] px-0 pb-2"
                  >
                    Teks
                  </TabsTrigger>
                </TabsList>
              </div>

              {/* Explore Right */}
              <div className="hidden md:block absolute right-0 top-1/2 -translate-y-1/2 text-sm text-muted-foreground hover:text-black cursor-pointer">
                Explore more Trending
              </div>
            </div>

            {/* ===== CONTENT ===== */}
            <TabsContent value="audio-visual" className="mt-12">
              <CardGrid />
            </TabsContent>

            <TabsContent value="audio" className="mt-12">
              <CardGrid />
            </TabsContent>

            <TabsContent value="foto" className="mt-12">
              <CardGrid />
            </TabsContent>

            <TabsContent value="teks" className="mt-12">
              <CardGrid />
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </section>
  );
}

/* ================= CARD GRID ================= */

function CardGrid() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      {data.map((item) => (
        <div
          key={item.id}
          className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300"
        >
          <div className="relative h-[220px]">
            <Image
              src={item.image}
              alt={item.title}
              fill
              className="object-cover"
            />
          </div>

          <div className="p-5 space-y-3">
            <div className="flex items-center gap-3 flex-wrap">
              <Badge
                className={`${item.categoryColor} text-white text-xs px-2 py-1`}
              >
                {item.category}
              </Badge>

              <span className="text-xs text-muted-foreground">{item.tag}</span>
            </div>

            <p className="text-xs text-muted-foreground">{item.date}</p>

            <h3 className="text-sm font-semibold leading-snug line-clamp-3 hover:text-[#b07c18] transition">
              {item.title}
            </h3>
          </div>
        </div>
      ))}
    </div>
  );
}