mediahub-fe/app/[locale]/(public)/indeks/page.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";

interface ImageCardProps {
  imageUrl: string;
  label: string;
  title: string;
  date: string;
}

const ImageCard: React.FC<ImageCardProps> = ({ imageUrl, label, title, date }) => {
  return (
    <div className="relative rounded-lg overflow-hidden shadow-md">
      <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-black bg-opacity-30 flex flex-col justify-end p-4 text-white">
        <span className="bg-red-600 text-xs font-bold px-2 py-1 rounded">{label}</span>
        <h3 className="text-sm font-semibold mt-2 line-clamp-2 w-fit ">{title}</h3>
        <span className="text-xs mt-1">{date}</span>
      </div>
    </div>
  );
};

const ImageGallery: React.FC = () => {
  const pathname = usePathname();

  const images = [
    {
      imageUrl: "/assets/banner-sample.png",
      label: "Giat Pimpinan",
      title: "Foto Kapolri Dorong Transformasi Polri Presisi",
      date: "2024-11-12 10:09:20 WIB",
    },
    {
      imageUrl: "/assets/hot-topik-1.jpg",
      label: "Giat Polri",
      title: "Foto Kapolri Tinjau Pengungsi Gunung",
      date: "2024-11-19 09:35:27 WIB",
    },
    {
      imageUrl: "/assets/hot-topik-2.jpg",
      label: "Giat Polri",
      title: "Foto Kapolri dalam Acara Bersama TNI",
      date: "2024-11-20 15:45:00 WIB",
    },
  ];

  const imageBottom = [
    {
      id: 1,
      imageUrl: "/assets/hot-topik-1.jpg",
      title: "Foto Kakorlantas Polri Tekankan Intervensi",
      description:
        "Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen. Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin apel pagi di NTMC pada Senin (2/12/2024) dan menekankan pentingnya pengelolaan ekstra dalam pengamanan Natal dan Tahun Baru 2024.",
    },
    {
      id: 2,
      imageUrl: "/assets/hot-topik-1.jpg",
      title: "Foto Kakorlantas Tinjau Jalur Tol, Jalur Wisata",
      description: "Kakorlantas Polri Irjen.Pol. Dr. Drs. Aan Suhanan, M.Si. memimpin survei jalur tol dari Cikopo, Purwakarta hingga Kalikangkung, Jawa Tengah, untuk persiapan Operasi Lilin 2024.",
    },
    {
      id: 3,
      imageUrl: "/assets/hot-topik-2.jpg",
      title: "Foto Kapolri Pastikan Kesiapan Polri Kawal Pilkada",
      description: "Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si menegaskan kesiapan Polri dalam mengawal Pilkada Serentak 2024 yang digelar Rabu, 27 November 2024.",
    },
  ];

  return (
    <>
      {/* Hero */}
      <div className="max-w-screen-xl  mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="md:col-span-2">
          <ImageCard {...images[0]} />
        </div>
        <div className="flex flex-col gap-4">
          <ImageCard {...images[1]} />
          <ImageCard {...images[2]} />
        </div>
      </div>
      {/* Bottom */}
      <div className="px-4 lg:px-24 py-4">
        <div className="flex flex-col gap-4">
          {imageBottom.map((image) => (
            <div key={image.id} className="flex flex-col md:flex-row items-start p-4 bg-white rounded-lg shadow-md hover:shadow-lg">
              <div className="w-full md:w-1/3">
                <img src={image.imageUrl} alt="" className="h-40 md:h-32 object-cover rounded-lg" />
              </div>
              <div className="flex flex-col justify-between w-full">
                <Link href={`${pathname}/detail/${image.id}`} className="text-lg font-semibold text-gray-800">
                  {image.title}
                </Link>
                <p className="text-sm text-gray-600 mt-2">{image.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default ImageGallery;