import Link from "next/link";
import React from "react";

const ContentCategory = () => {
  const categories = [
    {
      id: 1,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 2,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018",
      title: "OPS LILIN NATARU 2024",
    },
    {
      id: 3,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 4,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 5,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 6,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 7,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 8,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 9,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 10,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 11,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
    {
      id: 12,
      thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
      title: "PON XXI",
    },
  ];

  return (
    <div className="mx-auto px-4 lg:px-12 py-10 max-w-screen-xl ">
      <h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
        Kategori <span className="text-black dark:text-white">Konten</span>
      </h2>
      <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>

      <div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
        {categories.map((category) => (
          <Link key={category.id} href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
            <img src={category.thumbnail} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
              <h3 className="text-sm font-semibold truncate">{category.title}</h3>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default ContentCategory;