/* eslint-disable @next/next/no-img-element */
"use client";
import { useLocale, useTranslations } from "next-intl";
import React from "react";
import Image from "next/image";

import LocalePath from "@/shared/LocalePath";
import ImageWithFallback from "@/shared/ImageWithFallback";
import VideoWithFallback from "@/shared/VideoWithFallback";
type Props = {
  events: any[];
};

export default function OurEventsMore({ events }: Props) {
  console.log("🚀 ~ OurEventsMore ~ events:", events);
  const t = useTranslations();
  const locale = useLocale();
  return (
    <section className="latest-news container  lg:px-16 px-4 !mb-14">
      <div className="sm:flex gap-4 items-start">
        <div className=" flex-1">
          <h2 className="capitalize font-semibold text-[40px] text-start leading-[60px] mb-3 ">
            {t("Home.our events")}
          </h2>
        </div>
        <LocalePath
          href="/events"
          className=" w-fit  text-base font-normal leading-5 text-center bg-white hover:bg-thirdy whitespace-nowrap text-primary transition-colors border-[1px] border-primary hover:boder-thirdy  px-10 py-2 rounded-full mt-3 sm:mt-0"
        >
          {t("Show moree")}
        </LocalePath>
      </div>
      <div className="grid lg:grid-cols-2 gap-4 mt-6">
        {events?.map((ele: any, index: number) => {
          if (index < 2) {
            const firstImage = ele?.media?.find((img: string) =>
              img?.includes("images")
            );
            const firstVideo = ele?.media?.find((img: string) =>
              img?.includes("videos")
            );
            return (
              <div className="h-[460px]" key={index} data-aos="flip-right">
                <LocalePath href={`/events/${ele?.id}`}>
                  {/* <LocalePath href={`/events/${ele.id}`}> */}
                  {firstImage ? (
                    <ImageWithFallback
                      width={1000}
                      height={1000}
                      className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                      src={firstImage}
                      alt={`image`}
                    />
                  ) : firstVideo ? (
                    <VideoWithFallback
                      width={1000}
                      height={1000}
                      className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                      src={firstVideo}
                      loop
                      // autoPlay
                      muted
                    />
                  ) : (
                    <ImageWithFallback
                      width={1000}
                      height={1000}
                      className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                      src=""
                      alt={`image`}
                    />
                  )}
                </LocalePath>

                <div>
                  <p className=" font-normal leading-5 text-sm text-start text-textgrey">
                    {ele?.from}
                  </p>
                  <h2 className=" text-xl font-semibold leading-8 text-start">
                    {ele?.title}
                  </h2>
                </div>
              </div>
            );
          }
        })}
      </div>
      {/* <div className="flex justify-center">
        <LocalePath
          href="/our-events"
          className=" w-fit bg-white hover:bg-primary whitespace-nowrap text-primary hover:text-white transition-colors border-[1px] border-primary  px-10 py-2 rounded-full mt-3 sm:mt-0"
        >
          {t("Show more")}
        </LocalePath>
      </div> */}
    </section>
  );
}