'use client';

import { Calendar, Image as ImageIcon } from 'lucide-react';
import Link from 'next/link';

interface GaleriItem {
    id: string;
    judul: string;
    imageUrl: string;
    driveUrl: string | null;
    createdAt: Date | string;
}

export default function GaleriClientGrid({ galeri }: { galeri: GaleriItem[] }) {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {galeri.map((item) => (
                    <Link
                        key={item.id}
                        href={`/galeri/${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(59,130,246,0.15)] transition-all duration-500 flex flex-col cursor-pointer"
                    >
                        <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="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-400 transition-all duration-300 mb-3 leading-tight line-clamp-2 relative z-10">
                                {item.judul}
                            </h2>
                            <div className="mt-auto pt-3 flex items-center justify-between relative z-10 border-t border-white/10">
                                <span className={`px-3 py-1 rounded-full text-[10px] font-bold tracking-wider uppercase bg-blue-500/10 text-blue-400 border border-blue-500/20`}>
                                    <ImageIcon className="w-3 h-3 inline-block mr-1" />
                                    Acara
                                </span>
                                <span className="text-blue-400 font-semibold text-sm flex items-center gap-1 group-hover:translate-x-1 transition-transform">
                                    Detail <span className="text-lg">→</span>
                                </span>
                            </div>
                        </div>
                    </Link>
            ))}
        </div>
    );
}