"use client";

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

export default function VideoCard() {
  const slug = "bharatu-mardi-hadji-gugur-saat-bertugas";

  return (
    <Link href={`/details/${slug}?type=video`}>
      <div className="group bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition duration-300 overflow-hidden cursor-pointer">
        {/* IMAGE */}
        <div className="relative h-[200px] w-full">
          <Image
            src="/image/bharatu.jpg"
            alt="news"
            fill
            className="object-cover group-hover:scale-105 transition duration-300"
          />
        </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 group-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>
  );
}