interface Event {
    eventName: string;
    startDate: string;
    endDate: string;
    eventOrganizer: string;
    venue: string;
  }
  
  const events: Event[] = [
    {
      eventName: "USA",
      startDate: "Example Board-1",
      endDate: "+1 123-456-7890",
      eventOrganizer: "National",
      venue: "www.example.com"
    },
    {
      eventName: "America",
      startDate: "Example Board-2",
      endDate: "+44 20 1234 5678",
      eventOrganizer: "Inter National",
      venue: "www.example.com"
    },
    {
      eventName: "America",
      startDate: "Example Board-2",
      endDate: "+44 20 1234 5678",
      eventOrganizer: "Inter National",
      venue: "www.example.com"
    },
    {
      eventName: "America",
      startDate: "Example Board-2",
      endDate: "+44 20 1234 5678",
      eventOrganizer: "Inter National",
      venue: "www.example.com"
    },
    {
      eventName: "America",
      startDate: "Example Board-2",
      endDate: "+44 20 1234 5678",
      eventOrganizer: "Inter National",
      venue: "www.example.com"
    },
    {
      eventName: "America",
      startDate: "Example Board-2",
      endDate: "+44 20 1234 5678",
      eventOrganizer: "Inter National",
      venue: "www.example.com"
    },
    {
      eventName: "America",
      startDate: "Example Board-2",
      endDate: "+44 20 1234 5678",
      eventOrganizer: "Inter National",
      venue: "www.example.com"
    }
  ];
  


export default function CertificationTAble() {
  return (
    <div className="container m-auto">
      <div className="flex items-start justify-between m-auto max-w-7xl md:w-[87%] mx-auto px-4 w-full">
        <h4 className="text-4xl md:text-5xl font-bold mb-6">
        Find{" "}
          <span className="bg-clip-text text-transparent bg-iaab-gradient">
          Certification Body
          </span>
        </h4>
        {/* <div className="flex rounded-lg  bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
          <a href="#get-homedock" className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg  hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change">
            <button className="flex items-center will-change">
              <span className="will-change-transform">Apply for Accreditation</span>
            </button>
          </a>
        </div> */}
      </div>
      <div className="md:w-[87%] m-auto px-4 py-5">
      <div className="max-w-6xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-50 border-b">
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                Country
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                Name of Board
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                Contact Details
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                Accreditation Type
                </th>
                <th className="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                Website
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {events.map((event, index) => (
                <tr 
                  key={index}
                  className="hover:bg-gray-50 transition-colors duration-150 ease-in-out"
                >
                  <td className="px-6 py-4 text-sm text-gray-800">
                    {event.eventName}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-600">
                    {event.startDate}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-600">
                    {event.endDate}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-600">
                    {event.eventOrganizer}
                  </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>
    </div>
  );
}