/* 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 {
  MdKeyboardArrowRight,
  MdOutlineKeyboardArrowLeft,
} from "react-icons/md";

import LocalePath from "@/shared/LocalePath";
import { usePathname, useRouter } from "next/navigation";
import ImageWithFallback from "@/shared/ImageWithFallback";
import { updateURLParams } from "@/utils/helpers";
import CustomPagination from "@/shared/Pagination/CustomPagination";
import { section } from "@/interfaces/types";
import VideoWithFallback from "@/shared/VideoWithFallback";
type Props = {
  events: { data: any; section: section };
  pagination: any;
  current_page: any;
};

export default function EventsDetails({
  events,
  pagination,
  current_page,
}: Props) {
  const t = useTranslations();
  const currentItems = events?.data;
  const router = useRouter();
  const pathname = usePathname();
  const handlePaggination = (selectedPage: any) => {
    updateURLParams({ page: selectedPage }, router, pathname);
  };
  return (
    <section className="latest-news container  lg:px-16 px-4 !mb-14">
      <div className="grid lg:grid-cols-2 lg:gap-6 gap-14 mt-6">
        {currentItems?.map((ele: any, index: number) => {
          const firstImage = ele?.media?.find((img: string) =>
            img?.includes("images")
          );
          const firstVideo = ele?.media?.find((img: string) =>
            img?.includes("videos")
          );
          return (
            <div key={index} className="h-[460px]">
              <LocalePath href={`/events/${ele?.id}`}>
                {/* <LocalePath href={`/events/${ele.id}`}> */}
                {firstImage ? (
                  <ImageWithFallback
                    width={1000}
                    height={1000}
                    className="w-full h-[380px] object-cover rounded-lg mb-4"
                    src={firstImage}
                    alt="image"
                  />
                ) : firstVideo ? (
                  <VideoWithFallback
                    width={1000}
                    height={1000}
                    className="w-full h-[380px] object-cover rounded-lg mb-4"
                    src={firstVideo}
                    loop
                    // autoPlay
                    muted
                  />
                ) : (
                  <ImageWithFallback
                    width={1000}
                    height={1000}
                    className="w-full 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>
      {/* {events?.data?.data && events?.data?.data.length > 0 && (
        <div className="py-8">
          <CustomPagination
            itemsPerPage={pagination?.per_page}
            totalItems={pagination?.total}
            totalPage={pagination?.last_page}
            currentPage={+current_page}
            paginate={handlePaggination}
          />
        </div>
      )} */}
      <div className="flex justify-center">
        {/* <LocalePath
          href="/events"
          className=" w-fit  text-base font-normal leading-5 text-center bg-white hover:bg-thirdy transition-colors whitespace-nowrap text-primary border-[1px] border-primary  px-10 py-2 rounded-full mt-3 sm:mt-0"
        >
          {t("Show moree")}
        </LocalePath> */}
      </div>
    </section>
  );
}