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

interface EventsSectionProps {
  events: Event[];
}

export default function EventsSection({ events }: EventsSectionProps) {
  return (
    <section
      className="w-full py-16 border-t relative z-10"
      style={{
        backgroundColor: "var(--card-column)",
        borderColor: "color-mix(in srgb, var(--pixel-gold) 50%, transparent)",
        borderTopWidth: "2px",
      }}
    >
      <div className="max-w-7xl mx-auto px-8">
        {events.length === 0 ? (
          <div className="text-center">
            <p
              className="text-base"
              style={{ color: "var(--muted-foreground)" }}
            >
              Aucun événement à venir pour le moment
            </p>
          </div>
        ) : (
          <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-xs uppercase tracking-widest mb-2"
                    style={{ color: "var(--pixel-gold)" }}
                  >
                    Événement
                  </span>
                  <div
                    className="w-16 h-px"
                    style={{ backgroundColor: "var(--pixel-gold)" }}
                  ></div>
                </div>
                <div
                  className="text-lg font-bold mb-2 uppercase tracking-wide"
                  style={{ color: "var(--foreground)" }}
                >
                  {new Date(event.date).toLocaleDateString("fr-FR", {
                    day: "numeric",
                    month: "long",
                    year: "numeric",
                  })}
                </div>
                <div
                  className="text-base text-center"
                  style={{ color: "var(--foreground)" }}
                >
                  {event.name}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}