"use client";

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

const events: Event[] = [
  {
    date: "NOVEMBER 18th, 2023",
    name: "Tech Innovation Summit",
  },
  {
    date: "DECEMBER 3rd, 2023",
    name: "AI Revolution Launch",
  },
  {
    date: "DECEMBER 22nd, 2023",
    name: "Winter Code Festival",
  },
];

export default function EventsSection() {
  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">
                  Event
                </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">
                {event.date}
              </div>
              <div className="text-white text-base text-center">
                {event.name}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}