import { getTranslations } from "next-intl/server";

const events = [
  {
    link: "https://kids.turkmenexpo.com/",
    video:
      "https://editor.turkmenexpo.com/storage/app/media/video/KidsExpo%202024_%20Turkmenistan.mp4",
    logo: "https://kids.turkmenexpo.com/logo.svg",
  },
  {
    link: "https://turkmentextile.turkmenexpo.com/",
    video:
      "https://turkmentextile.turkmenexpo.com/app/storage/app/media/video/Textile2025.mp4",
    logo: "/assets/icons/turkmen-textile.png",
  },
  {
    link: "https://itse.turkmenexpo.com/",
    video:
      "https://itse.turkmenexpo.com/app/storage/app/media/video/itse2025.mp4",
    logo: "https://itse.turkmenexpo.com/logo.svg",
  },
];

export const Events = async ({ lang }: { lang: string }) => {
  const t = await getTranslations("home");

  return (
    <section>
      <div className="container md:block">
        <div className="sm:mb-10">
          <h2 className="text-center font-semibold text-3xl mb-8">
            {t("exhibitions")} <span className="text-PRIMARY">Turkmen</span>
            <span className="text-red">Expo 2025</span>
          </h2>
        </div>
        <div className="w-full flex flex-col items-center gap-8 lg:flex-row">
          {events.map((item, i) => (
            <article
              key={i}
              className="w-full h-auto bg-white drop-shadow-sm rounded-sm"
            >
              <div className="w-full h-full">
                <video
                  src={item.video}
                  className="size-full object-cover"
                  autoPlay
                  muted
                  loop
                />
              </div>
              <div className="flex items-center justify-between p-4">
                <img
                  height={80}
                  width={100}
                  src={item.logo}
                  alt="logo"
                  className="h-10 w-auto object-cover"
                />
                <a
                  href={events[i].link}
                  target="_blank"
                  className="text-PRIMARY underline"
                >
                  {t("goToWebsite")}
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};