import Image from 'next/image';
import Link from 'next/link';
import { FaArrowRight } from 'react-icons/fa';

interface ServiceCardProps {
  id: string; 
  title: string;
  description: string;
  image: string;
}

export const ServiceCard = ({ id, title, description, image }: ServiceCardProps) => (
  <Link href={`/layanan/${id}`} className="block group h-full">
    <div className="bg-white rounded-[2.5rem] overflow-hidden shadow-sm border border-slate-100 hover:shadow-2xl hover:shadow-blue-100/50 transition-all duration-500 flex flex-col h-full relative">
      
      {/* BAGIAN GAMBAR */}
      <div className="relative h-64 w-full overflow-hidden">
        <Image 
          src={image} 
          alt={title} 
          fill 
          className="object-cover transition-transform duration-1000 group-hover:scale-110"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
        {/* Overlay Biru Transparan saat hover */}
        <div className="absolute inset-0 bg-blue-600/0 group-hover:bg-blue-600/10 transition-colors duration-500"></div>
      </div>

      {/* BAGIAN KONTEN */}
      <div className="p-8 md:p-10 flex flex-col grow relative">
        <div className="relative z-10 flex flex-col h-full">
          {/* Title berubah biru saat card di-hover */}
          <h3 className="text-xl font-black text-slate-900 leading-tight mb-4 group-hover:text-blue-600 transition-colors uppercase tracking-tight">
            {title}
          </h3>
          
          <p className="text-slate-500 leading-relaxed font-medium text-sm mb-8 grow">
            {description}
          </p>
          
          <div className="mt-auto">
            {/* Indikator Navigasi */}
            <div className="inline-flex items-center text-slate-400 font-black gap-2 text-[10px] uppercase tracking-[0.2em] group-hover:text-blue-600 transition-all">
              Detail Layanan 
              <FaArrowRight size={12} className="text-blue-600 transition-transform group-hover:translate-x-2" />
            </div>
          </div>
        </div>

        {/* Dekorasi Aksen Mewah di Pojok */}
        <div className="absolute top-0 right-0 w-24 h-24 bg-blue-50/50 rounded-bl-full transform translate-x-12 -translate-y-12 group-hover:translate-x-6 group-hover:-translate-y-6 transition-transform duration-700"></div>
      </div>
    </div>
  </Link>
);