import { CheckIcon } from '@heroicons/react/20/solid'

const events = [
  {
    name: 'VerseFest 2024',
    date: 'Nov 21-24',
    location: 'OurWorld Verse',
    languages: ['ENG', 'ARABIC'],
    signupLink: 'https://ourverse.tf/events/versefest.html',
  },
  {
    name: 'Freelance Fest 2024',
    date: 'Oct 23-24',
    location: 'OurWorld Verse',
    languages: ['ARABIC'],
    signupLink: 'https://ourverse.tf/events/versefest.html',
  },
  // More events can be added here...
]

// A function to return small flag icons for the specified languages
const languageIcons = {
  ENG: '🇬🇧', // English flag icon (Union Jack)
  ARABIC: '🇦🇪', // Arabic flag icon (UAE as an example)
}

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Eventpage1() {
  return (
    <div className="relative bg-white pt-8 pb-24">
      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
        <h2 className="text-intro">Events</h2>
        <p className="mt-2 h3-title-new">
          Get Involved
        </p>
        <p className="mx-auto mt-4 max-w-prose section-text font-display">
          Join the latest events from OurVerse community.
        </p>
      </div>
      <div className="px-4 sm:px-6 mt-12 lg:px-8 max-w-6xl mx-auto">
        <div className="mt-8 flow-root">
          <div className="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
            <div className="inline-block min-w-full py-2 align-middle">
              <table className="min-w-full border-separate border-spacing-0">
                <thead>
                  <tr>
                    <th
                      scope="col"
                      className="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-4 pr-3 text-left section-text backdrop-blur backdrop-filter sm:pl-6 lg:pl-8"
                    >
                      Event
                    </th>
                    <th
                      scope="col"
                      className="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left section-text  backdrop-blur backdrop-filter sm:table-cell"
                    >
                      Date
                    </th>
                    <th
                      scope="col"
                      className="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left section-text  backdrop-blur backdrop-filter lg:table-cell"
                    >
                      Location
                    </th>
                    <th
                      scope="col"
                      className="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left section-text  backdrop-blur backdrop-filter"
                    >
                      Language
                    </th>
                    <th
                      scope="col"
                      className="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-3 pr-4 backdrop-blur backdrop-filter sm:pr-6 lg:pr-8"
                    >
                      <span className="sr-only">Sign Up</span>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {events.map((event, eventIdx) => (
                    <tr key={event.name}>
                      <td
                        className={classNames(
                          eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
                          'whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-900 sm:pl-6 lg:pl-8',
                        )}
                      >
                        {event.name}
                      </td>
                      <td
                        className={classNames(
                          eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
                          'hidden whitespace-nowrap px-3 py-4 text-base text-gray-500 sm:table-cell',
                        )}
                      >
                        {event.date}
                      </td>
                      <td
                        className={classNames(
                          eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
                          'hidden whitespace-nowrap px-3 py-4 text-base text-gray-500 lg:table-cell',
                        )}
                      >
                        {event.location}
                      </td>
                      <td
                        className={classNames(
                          eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
                          'whitespace-nowrap px-3 py-4 text-base text-gray-500',
                        )}
                      >
                        {event.languages.map((lang) => (
                          <span key={lang} className="inline-block mx-2">
                            {languageIcons[lang]}
                          </span>
                        ))}
                      </td>
                      <td
                        className={classNames(
                          eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
                          'relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-8 lg:pr-8',
                        )}
                      >
                        <a href={event.signupLink} target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-900">
                          Sign Up<span className="sr-only">, {event.name}</span>
                        </a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}