import React from "react";

interface CardsEventsProps {
  evento: {
    id: number;
    titulo: string;
    fecha: string;
    lugar: string;
    imagen: string;
    descripcion: string;
    categoria: string;
    costo_inscripcion: string;
  };
}

export default function CardsEvents({ evento }: CardsEventsProps) {
  return (
    <div className="bg-[#232336] rounded-2xl shadow-lg border border-[#232336]/60 flex flex-col overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-[1.03] hover:border-yellow-400">
      <img
        src={evento.imagen}
        alt={evento.titulo}
        className="w-full h-56 object-cover transition-all duration-300 group-hover:scale-105"
      />
      <div className="p-6 flex flex-col flex-1">
        <span className="text-xs font-bold text-gray-300 mb-2 uppercase tracking-wide">
          {new Date(evento.fecha).toLocaleDateString("es-PE", { day: "2-digit", month: "short", year: "numeric" }).replace(/\./g, "")}
        </span>
        <h3 className="text-lg font-extrabold text-white mb-2 leading-tight line-clamp-2">{evento.titulo}</h3>
        <div className="flex flex-wrap gap-2 mb-3">
          <span className="bg-yellow-400/20 text-yellow-400 font-bold text-xs px-3 py-1 rounded-full">{evento.categoria}</span>
          <span className="bg-[#232336] text-gray-300 font-semibold text-xs px-3 py-1 rounded-full">{evento.lugar}</span>
        </div>
        <p className="text-gray-400 text-sm mb-3 line-clamp-3">{evento.descripcion}</p>
        <span className="text-xs text-gray-400 mt-auto">
          <span className="font-semibold">Inscripción:</span> {evento.costo_inscripcion}
        </span>
      </div>
    </div>
  );
}