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

interface NewsCardProps {
    id: string;
    slug: string;
    titulo: string;
    resumen: string;
    tipo?: string;
    fecha: string;
    imagenUrl?: string | null;
    showCategory?: boolean;
    showFooterDate?: boolean;
    showFooterButton?: boolean;
    footerText?: string;
}

export const NewsCard = ({ 
    id, 
    slug, 
    titulo, 
    resumen, 
    tipo, 
    fecha, 
    imagenUrl,
    showCategory = false,
    showFooterDate = true,
    showFooterButton = true,
    footerText
}: NewsCardProps) => {
    // Formatear fecha
    const fechaObj = new Date(fecha);
    const fechaFormateada = fechaObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });

    return (
        <Link href={`/noticia/${slug}`} className="group relative flex flex-col h-full bg-slate-900/40 backdrop-blur-xl border border-white/10 rounded-3xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(6,182,212,0.3)] hover:border-cyan-500/50">
            {/* Imagen Destacada */}
            <div className="relative aspect-[16/10] w-full overflow-hidden bg-slate-800">
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent z-10 opacity-90"></div>
                {imagenUrl ? (
                    <img src={imagenUrl} alt={titulo} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                ) : (
                    <div className="w-full h-full flex items-center justify-center bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-800 to-slate-900">
                        {/* No placeholder text as per user request */}
                    </div>
                )}
                
                {/* Badge/Tag - Habilitable por prop */}
                {showCategory && (
                    <div className="absolute top-4 left-4 z-20">
                        <span className="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider backdrop-blur-md border border-white/20 bg-black/40 text-cyan-300 shadow-[0_0_10px_rgba(6,182,212,0.2)]">
                            {tipo?.toUpperCase() || 'NOTICIA'}
                        </span>
                    </div>
                )}
            </div>

            {/* Contenido */}
            <div className="flex flex-col flex-grow p-6 relative z-20">
                <h3 className="text-xl font-bold font-outfit text-white leading-snug mb-3 group-hover:text-cyan-400 transition-colors line-clamp-2">
                    {titulo}
                </h3>
                
                <p className="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
                    {resumen}
                </p>

                {/* Footer del card */}
                <div className="mt-auto pt-5 border-t border-white/10 flex items-center justify-between">
                    <span className="text-xs font-black tracking-widest uppercase text-cyan-500 group-hover:text-cyan-300 transition-colors">
                        {showFooterDate ? (
                             <div className="flex items-center gap-2">
                                <Calendar size={12} />
                                {fechaFormateada}
                             </div>
                        ) : (
                            footerText || "Ver más"
                        )}
                    </span>
                    {showFooterButton && (
                        <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-cyan-500 group-hover:border-cyan-400 group-hover:text-slate-950 transition-all">
                            <ArrowUpRight size={16} className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                        </div>
                    )}
                </div>
            </div>
        </Link>
    );
};