"use client";
import Image, { type StaticImageData } from "next/image";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

type CarouselItem = {
  title: string;
  image: StaticImageData | string;
  url?: string | null;
};

export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
  return (
    <section className="rounded-2xl overflow-hidden relative">
      <Swiper
        modules={[Autoplay, Navigation, Pagination]}
        slidesPerView={1}
        loop
        navigation
        autoplay={{ delay: 3000, disableOnInteraction: false }}
        pagination={{ clickable: true }}
        className="
          [&_.swiper-button-next]:text-white!
          [&_.swiper-button-prev]:text-white!
          [&_.swiper-button-next]:hidden!
          [&_.swiper-button-prev]:hidden!
          md:[&_.swiper-button-next]:flex!
          md:[&_.swiper-button-prev]:flex!
          [&_.swiper-pagination-bullet]:bg-white!
          [&_.swiper-pagination-bullet-active]:bg-white!
        "
      >
        {items.map((item, i) => (
          <SwiperSlide key={i}>
            {item.url ? (
              <Link
                href={item.url}
                className="block relative w-full h-[200px] sm:h-[300px] md:h-[496px]"
              >
                <Image
                  src={item.image}
                  alt={item.title}
                  fill
                  className="object-cover"
                  priority={i === 0}
                />
              </Link>
            ) : (
              <div className="relative w-full h-[200px] sm:h-[300px] md:h-[496px]">
                <Image
                  src={item.image}
                  alt={item.title}
                  fill
                  className="object-cover"
                  priority={i === 0}
                />
              </div>
            )}
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
}
