import { Calendar, ArrowRight } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { News, formatTanggalIndonesia } from "@/types/news";
import { buildImageUrl } from "@/lib/utils/image";

interface NewsCardProps {
  item: News;
}

export default function NewsCard({ item }: NewsCardProps) {
  const imageUrl = buildImageUrl(item.thumbnail ?? item.image);
  const tanggal = formatTanggalIndonesia(item.published_date);

  return (
    <div className="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group">
      <div className="relative h-48 md:h-56 overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300">
        <Image
          src={imageUrl}
          alt={item.title}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-300"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          unoptimized
        />
        <div className="absolute inset-0 bg-gradient-to-br from-brand/20 to-brand/10 z-10" />

        {item.category && (
          <div className="absolute top-4 left-4 z-20">
            <span className="bg-brand text-white px-3 py-1 rounded-full text-xs font-semibold shadow-md">
              {item.category}
            </span>
          </div>
        )}
      </div>

      <div className="p-5 md:p-6">
        <div className="flex items-center gap-2 text-gray-500 text-sm mb-3">
          <Calendar className="w-4 h-4 flex-shrink-0" />
          <span>{tanggal}</span>
        </div>

        <h3 className="text-lg md:text-xl font-bold text-gray-800 mb-3 line-clamp-2 min-h-[3.5rem] group-hover:text-brand transition-colors duration-300">
          {item.title}
        </h3>

        <p className="text-gray-600 text-sm md:text-base mb-4 line-clamp-3 min-h-[4.5rem]">
          {item.description ?? item.content?.slice(0, 150).trim()}
        </p>

        <Link
          href={`/berita/${item.slug}`}
          className="inline-flex items-center gap-2 text-brand font-semibold hover:gap-3 transition-all duration-300"
        >
          <span>Baca Selengkapnya</span>
          <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
        </Link>
      </div>
    </div>
  );
}