'use client'

import Autoplay from 'embla-carousel-autoplay'
import React from 'react'

import { BannersHome } from '@/utils/banners'
import Image from 'next/image'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from './ui/carousel'

export function Banner() {
  const plugin = React.useRef(
    Autoplay({ delay: 5000, stopOnInteraction: true }),
  )

  return (
    <section>
      <Carousel
        plugins={[plugin.current]}
        className="w-full"
        // onMouseEnter={plugin.current.stop}
        onMouseLeave={plugin.current.reset}
      >
        <CarouselContent>
          {BannersHome.map((item) => (
            <CarouselItem key={item.id}>
              <Image
                src={item.desktop.src}
                alt="Banner"
                width={item.desktop.width}
                height={item.desktop.height}
                // className="h-full object-cover min-h-[400px] md:min-h-[700px]"
                unoptimized
              />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </section>
  )
}
