"use client";

import Image from "next/image";
import Link from "next/link";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import type { BrandSlide } from "@/data/home/brand";

type Props = { slides: BrandSlide[] };

/** Mirrors vanilla `new Swiper(".brand", …)` from template main.js. */
export default function BrandSwiper({ slides }: Props) {
  const loopSlides = [...slides, ...slides];
  return (
    <Swiper
      className="brand"
      modules={[Autoplay]}
      loop={loopSlides.length > 6}
      autoplay={{ delay: 3000, disableOnInteraction: false }}
      spaceBetween={20}
      slidesPerView={2}
      breakpoints={{
        375: { slidesPerView: 2, spaceBetween: 20 },
        480: { slidesPerView: 2, spaceBetween: 20 },
        577: { slidesPerView: 3, spaceBetween: 30 },
        769: { slidesPerView: 4, spaceBetween: 30 },
        1025: { slidesPerView: 5, spaceBetween: 30 },
        1201: { slidesPerView: 6, spaceBetween: 30 },
        1366: { slidesPerView: 6, spaceBetween: 30 },
        1440: { slidesPerView: 6, spaceBetween: 30 },
        1920: { slidesPerView: 6, spaceBetween: 30 },
      }}
    >
      {loopSlides.map((s, i) => (
        <SwiperSlide key={`${s.id}-${i}`}>
          <div className="brand-img">
            <Link href={s.href} title="">
              <Image
                src={s.imageSrc}
                alt={s.alt}
                width={140}
                height={40}
                style={{ width: "auto", height: "auto" }}
              />
            </Link>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}