'use client';

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

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

export default function RangersTalkClientGrid({ talks }: { talks: RangersTalkItem[] }) {
    return (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
            {talks.map((item) => (
                <Link
                    key={item.id}
                    href={`/rangers-talk/${item.id}`}
                    className="group bg-white/5 backdrop-blur-xl rounded-2xl 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-square 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-square w-full bg-black/20 flex items-center justify-center text-gray-600 relative overflow-hidden">
                            <Mic2 className="w-8 h-8 stroke-[1.5] relative z-10" />
                        </div>
                    )}
                    <div className="p-4 md:p-5 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-[30px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

                        <div className="flex items-center gap-1.5 text-[10px] md:text-xs text-gray-400 mb-2 relative z-10">
                            <Calendar className="w-3 h-3" />
                            {new Date(item.createdAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}
                        </div>
                        <h2 className="text-sm md:text-base 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-2 leading-tight line-clamp-2 relative z-10">
                            {item.judul}
                        </h2>
                        <p className="text-gray-400 text-xs md:text-sm leading-relaxed line-clamp-2 md:line-clamp-3 flex-1 relative z-10">
                            {item.narasi}
                        </p>
                    </div>
                </Link>
            ))}
        </div>
    );
}