"use client";

import Image from "next/image";
import Link from "next/link";

export default function ImageCard() {
  const slug = "bharatu-mardi-hadji-gugur-saat-bertugas";
  return (
    <Link href={`/details/${slug}?type=image`}>
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition duration-300 overflow-hidden">
        {/* IMAGE */}
        <div className="relative h-[200px] w-full">
          <Image
            src="/image/novita2.png"
            alt="news"
            fill
            className="object-cover"
          />
        </div>

        {/* CONTENT */}
        <div className="p-5 space-y-3">
          {/* BADGE + TAG */}
          <div className="flex items-center gap-2 text-xs">
            <span className="bg-red-600 text-white px-2 py-[3px] rounded-md font-medium">
              POLRI
            </span>
            <span className="text-gray-500 uppercase tracking-wide">
              SEPUTAR PRESTASI
            </span>
          </div>

          {/* DATE */}
          <p className="text-xs text-gray-400">02 Februari 2024</p>

          {/* TITLE */}
          <h3 className="font-semibold text-[15px] leading-snug line-clamp-2 hover:text-[#966314] transition">
            Bharatu Mardi Hadji Gugur Saat Bertugas, Diganjar Kenaikan Pangkat
            Luar Biasa
          </h3>

          {/* EXCERPT */}
          <p className="text-sm text-gray-500 line-clamp-2 leading-relaxed">
            Jakarta - Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo
            memberikan kenaikan pangkat luar biasa anumerta kepada...
          </p>
        </div>
      </div>
    </Link>
  );
}