"use client";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/swiper-bundle.css";
import "./homeSlider.scss";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Fancybox from "@/shared/ui/Fancybox";
import { partners, section } from "@/interfaces/types";
import ImageWithFallback from "@/shared/ImageWithFallback";
import VideoWithFallback from "@/shared/VideoWithFallback";

type Props = {
  partners: { data: partners[]; section: section };
};
export default function HomeSwiper({ partners }: Props) {
  const t = useTranslations("");
  return (
    <div className="container  lg:px-16 px-4 !my-40">
      <div className="lg:w-1/2 mx-auto my-14">
        <h2
          className="mb-6 text-center  text-5xl font-semibold leading-10"
          data-aos="fade-down"
        >
          {partners.section.title}
        </h2>
        <p
          data-aos="fade-down"
          className=" font-normal text-lg leading-7 text-center"
        >
          {partners.section.description}
        </p>
      </div>
      <Fancybox
        options={{
          Carousel: {
            infinite: true,
          },
        }}
      >
        <Swiper
          modules={[Autoplay]}
          slidesPerView={7}
          pagination={{ clickable: true }}
          breakpoints={{
            300: {
              slidesPerView: 4,
              spaceBetween: 10,
            },
            630: {
              slidesPerView: 4,
              spaceBetween: 10,
            },
            800: {
              slidesPerView: 5,
              spaceBetween: 10,
            },
            1060: {
              slidesPerView: 6,
              spaceBetween: 10,
            },
            1350: {
              slidesPerView: 6,
              spaceBetween: 10,
            },
          }}
        >
          {partners?.data?.map((ele, index: number) => {
            return (
              <SwiperSlide key={index}>
                {ele.media?.includes("images") ? (
                  <ImageWithFallback
                    data-aos="zoom-in"
                    data-fancybox="gallery"
                    className="md:w-32 size-20  object-contain"
                    width={200}
                    height={200}
                    src={ele.media}
                    alt={"image"}
                  />
                ) : (
                  <VideoWithFallback
                    data-aos="zoom-in"
                    data-fancybox="gallery"
                    className="md:w-32 size-20  object-contain"
                    width={200}
                    height={200}
                    src={ele.media}
                    loop
                    // autoPlay
                    muted
                  />
                )}
              </SwiperSlide>
            );
          })}
        </Swiper>
      </Fancybox>
    </div>
  );
}