interface Event {
  id: string;
  date: string;
  name: string;
}

interface EventsSectionProps {
  events: Event[];
}

export default function EventsSection({ events }: EventsSectionProps) {
  if (events.length === 0) {
    return null;
  }
  return (
    <section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
      <div className="max-w-7xl mx-auto px-8">
        <div className="flex flex-col md:flex-row items-center justify-around gap-8">
          {events.map((event, index) => (
            <div key={index} className="flex flex-col items-center">
              <div className="flex flex-col items-center mb-4">
                <span className="text-pixel-gold text-xs uppercase tracking-widest mb-2">
                  Événement
                </span>
                <div className="w-16 h-px bg-pixel-gold"></div>
              </div>
              <div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
                {new Date(event.date).toLocaleDateString("fr-FR", {
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
              </div>
              <div className="text-white text-base text-center">
                {event.name}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}