'use client';

import { Calendar, Trophy } from 'lucide-react';
import Link from 'next/link';

interface PrestasiItem {
    id: string;
    judul: string;
    narasi: string;
    imageUrl: string | null;
    createdAt: Date | string;
}

export default function PrestasiClientGrid({ prestasi }: { prestasi: PrestasiItem[] }) {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {prestasi.map((item) => (
                <Link
                    key={item.id}
                    href={`/prestasi/${item.id}`}
                    className="group bg-white/5 backdrop-blur-xl rounded-[2rem] overflow-hidden border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] hover:border-white/30 hover:shadow-[0_8px_40px_0_rgba(37,99,235,0.15)] transition-all duration-500 flex flex-col cursor-pointer"
                >
                    {item.imageUrl ? (
                        <div className="aspect-[3/4] w-full overflow-hidden bg-black/20 relative">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                                src={item.imageUrl}
                                alt={item.judul}
                                className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                            />
                        </div>
                    ) : (
                        <div className="aspect-[3/4] w-full bg-black/20 flex items-center justify-center text-gray-600 relative overflow-hidden">
                            <Trophy className="w-12 h-12 stroke-[1.5] relative z-10" />
                        </div>
                    )}
                    <div className="p-6 md:p-8 flex flex-col flex-1 relative">
                        {/* Ambient Glow */}
                        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-1/2 bg-blue-500/20 blur-[50px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

                        <div className="flex items-center gap-2 text-xs text-gray-400 mb-3 relative z-10">
                            <Calendar className="w-3.5 h-3.5" />
                            {new Date(item.createdAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
                        </div>
                        <h2 className="text-xl md:text-2xl font-bold text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-blue-400 group-hover:to-indigo-500 transition-all duration-300 mb-3 leading-tight line-clamp-2 relative z-10">
                            {item.judul}
                        </h2>
                        <p className="text-gray-400 text-sm md:text-base leading-relaxed line-clamp-4 flex-1 relative z-10">
                            {item.narasi}
                        </p>
                        <div className="mt-6 pt-4 border-t border-white/10 text-right relative z-10">
                            <span className="inline-flex items-center gap-1 text-blue-400 font-semibold text-sm group-hover:translate-x-1 transition-transform">
                                Baca selengkapnya <span className="text-lg">→</span>
                            </span>
                        </div>
                    </div>
                </Link>
            ))}
        </div>
    );
}