"use client";

export default function Category() {
  const categories = [
    "PON XXI",
    "OPERASI KETUPAT 2025",
    "HUT HUMAS KE-74",
    "OPERASI ZEBRA 2025",
    "OPERASI MANTAP PRAJA & PILKADA 2024",
    "PERS RILIS",
    "LIPUTAN KEGIATAN",
    "UNGKAP KASUS",
    "INFOGRAFIS",
    "SEPUTAR PRESTASI",
  ];

  return (
    <section className="px-4 py-10">
      <div className="max-w-[1350px] mx-auto bg-white rounded-xl shadow-md p-6">
        <h2 className="text-xl font-semibold mb-5">
          10 Kategori Paling Populer
        </h2>
        <div className="flex flex-wrap gap-3">
          {categories.map((category, index) => (
            <button
              key={index}
              className="px-4 py-2 rounded border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-100 transition"
            >
              {category}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}