'use client';

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

interface LaporanItem {
    id: string;
    judul: string;
    periode: string;
    narasi: string | null;
    fileUrl: string | null;
    createdAt: Date | string;
}

export default function LaporanClientGrid({ laporan }: { laporan: LaporanItem[] }) {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {laporan.map((item) => (
                <Link
                    key={item.id}
                    href={`/laporan-keuangan/${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"
                >
                    <div className="aspect-[3/4] w-full bg-black/20 flex flex-col items-center justify-center text-gray-600 gap-3 group-hover:bg-black/40 transition-colors relative overflow-hidden">
                        <FileText className="w-16 h-16 stroke-[1.2] relative z-10" />
                        <span className="text-xs font-bold uppercase tracking-wider relative z-10">Laporan Keuangan</span>
                    </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" />
                            {item.periode}
                        </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>
                        {item.narasi && (
                            <p className="text-gray-400 text-sm md:text-base leading-relaxed line-clamp-3 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">
                                Lihat PDF <span className="text-lg">→</span>
                            </span>
                        </div>
                    </div>
                </Link>
            ))}
        </div>
    );
}