import React from "react";

interface Event {
  eventName: string;
  startDate: string;
  endDate: string;
  eventOrganizer: string;
  venue: string;
}

const events: Event[] = [
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
  {
    eventName: "IAAB Communication Network Meeting",
    startDate: "11-Feb-2025",
    endDate: "11-Feb-2025",
    eventOrganizer: "IAF/LAC",
    venue: "Online",
  },
];

function Events({ data }: any) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 p-8">
      <div className="max-w-6xl mx-auto bg-white/25 rounded-xl shadow-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-25 border-b">
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                  Event Name
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                  Start Date
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                  End Date
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                  Location
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                  Venue
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {data &&
                data?.events.map((event: any, i: any) => (
                  <tr
                    key={i}
                    className="hover:bg-gray-50 transition-colors duration-150 ease-in-out"
                  >
                    <td className="px-6 py-4 text-sm text-gray-800">
                      {event?.title}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">
                      {new Date(event?.startDate).toLocaleDateString()}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">
                      {new Date(event?.endDate).toLocaleDateString()}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">
                      {event?.location}
                    </td>
                    <td className="px-6 py-4">
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        {event?.venue}
                      </span>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default Events;