"use client";

import "swiper/css";
import "swiper/css/effect-cards";

import { useEffect, useRef } from "react";
import { Autoplay, EffectCards } from "swiper/modules";
import type { Swiper as SwiperType } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

import { cn } from "@/lib/utils";

const IMAGES = [
  {
    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
    alt: "پرتره سارا احمدی در فضای شهری",
    name: "سارا احمدی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
    alt: "پرتره مریم رضایی در نور طبیعی",
    name: "مریم رضایی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
    alt: "پرتره نیلوفر کریمی در استودیو",
    name: "نیلوفر کریمی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
    alt: "پرتره امیر حسینی در فضای باز",
    name: "امیر حسینی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
    alt: "پرتره لیلا محمدی در فضای شهری",
    name: "لیلا محمدی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
    alt: "پرتره کامران نظری در نور طبیعی",
    name: "کامران نظری",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
    alt: "پرتره فاطمه موسوی در استودیو",
    name: "فاطمه موسوی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
    alt: "پرتره پدرام جعفری در فضای باز",
    name: "پدرام جعفری",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
    alt: "پرتره سمیه لاری در فضای شهری",
    name: "سمیه لاری",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
    alt: "پرتره علی رضایی در نور طبیعی",
    name: "علی رضایی",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
    alt: "پرتره مایا اکبری در استودیو",
    name: "مایا اکبری",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
    alt: "پرتره رضا امجد در فضای باز",
    name: "رضا امجد",
  },
];

const css = `
.mySwiper18 {
  width: min(78vw, 260px);
  height: min(102vw, 340px);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .mySwiper18 {
    width: 260px;
    height: 340px;
  }
}

.mySwiper18 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}

.mySwiper18 .swiper-slide-active {
  overflow: visible !important;
}
`;

interface Gallery18Props {
  className?: string;
}

const Gallery18 = ({ className }: Gallery18Props) => {
  const swiperRef = useRef<SwiperType | null>(null);

  useEffect(() => {
    swiperRef.current?.update();
  }, []);

  return (
    <section dir="rtl" lang="fa" className={cn("py-16 sm:py-24 lg:py-32", className)}>
      <style>{css}</style>
      <div className="container flex flex-col items-center gap-6 px-4 sm:gap-10">
        <div className="relative flex w-full justify-center overflow-visible pb-10 sm:pb-12">
          <Swiper
            dir="rtl"
            effect="cards"
            autoplay={{
              delay: 1000,
              disableOnInteraction: false,
            }}
            loop={true}
            grabCursor={true}
            modules={[EffectCards, Autoplay]}
            className="mySwiper18"
            onSwiper={(swiper) => {
              swiperRef.current = swiper;
            }}
          >
            {IMAGES.map((image, index) => (
              <SwiperSlide key={`${image.name}-${index}`} className="relative">
                <img
                  className="h-full w-full overflow-hidden rounded-3xl object-cover"
                  src={image.src}
                  alt={image.alt}
                />
                <div className="absolute inset-x-0 -bottom-10 flex h-10 items-end justify-center text-center font-sans text-[10px] font-light sm:-bottom-12 sm:h-12 sm:text-xs">
                  <span dir="rtl">
                    @{image.name.replace(/\s+/g, "_")}
                  </span>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
};

export { Gallery18 };