"use client";
import * as React from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import Image from "next/image";
import Autoplay from "embla-carousel-autoplay";
import { Ghost } from "lucide-react";

export const Banner = () => {
  const plugin = React.useRef(
    Autoplay({ delay: 10000, stopOnInteraction: true })
  );
  return (
    <div className="mb-4 flex justify-center">
      <Carousel
        plugins={[plugin.current]}
        className="w-full rounded-2xl"
        onMouseEnter={() => plugin.current.stop()}
        onMouseLeave={() => plugin.current.play()}
      >
        <CarouselContent className="hover:cursor-pointer">
          {[
            { text: "Premium Design", color: "2c3e50" },
            { text: "Innovative Technik", color: "34495e" },
            { text: "Exklusive Angebote", color: "4834d4" },
            { text: "Jetzt Shoppen", color: "130f40" },
            { text: "Jomblo Premium", color: "535c68" },
          ].map((banner, index) => (
            <CarouselItem
              key={index}
              className="transition-transform duration-1000 ease-in-out"
            >
              <div className="">
                <AspectRatio ratio={24 / 9} className="relative">
                  {/* Performance: Added sizes to optimize image delivery and priority for LCP improvement */}
                  <Image
                    src={`https://placehold.co/1400x600/${banner.color}/FFFFFF/png?text=${encodeURIComponent(banner.text)}&font=montserrat`}
                    alt={`Jomblo Banner ${index + 1}`}
                    fill
                    className="object-cover w-full h-full"
                    priority={index === 0}
                  />
                </AspectRatio>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="ml-14" variant="ghost" />
        <CarouselNext className="mr-14" variant="ghost" />
      </Carousel>
    </div>
  );
}