"use client";
import Image from "next/image";
import Autoplay from "embla-carousel-autoplay";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";

function Hero({
  banners = [],
}: {
  banners?: { title: string; image: string; link: string | null }[];
}) {
  const slides = banners.length
    ? banners
    : [
        { title: "Seasonal Collection", image: "/banner-1.png", link: null },
        { title: "Smart Tech Picks", image: "/banner-2.png", link: null },
        { title: "Style Meets Function", image: "/banner-3.png", link: null },
      ];
  return (
    <section className="mt-8">
      <Carousel
        opts={{ loop: true }}
        plugins={[Autoplay({ delay: 3000, stopOnInteraction: false })]}
        className="relative w-full rounded-xl"
      >
        <CarouselContent className="rounded-xl">
          {slides.map((slide) => (
            <CarouselItem
              className="relative overflow-hidden rounded-xl"
              key={slide.title}
            >
              {slide.link ? (
                <a href={slide.link} aria-label={slide.title}>
                  <Image
                    className="w-full object-cover rounded-xl"
                    src={slide.image}
                    alt={slide.title}
                    priority
                    width={2400}
                    height={2400}
                  />
                </a>
              ) : (
                <Image
                  className="w-full object-cover rounded-xl"
                  src={slide.image}
                  alt={slide.title}
                  priority
                  width={2400}
                  height={2400}
                />
              )}
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </section>
  );
}

export default Hero;