'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 pluginDesktop = React.useRef(
    Autoplay({ delay: 5000, stopOnInteraction: true }),
  )
  const pluginMobile = React.useRef(
    Autoplay({ delay: 5000, stopOnInteraction: true }),
  )

  return (
    <section>
      <Carousel
        plugins={[pluginDesktop.current]}
        className="w-full hidden md:flex"
        // onMouseEnter={pluginDesktop.current.stop}
        onMouseLeave={pluginDesktop.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="min-h-[400px] w-screen object-cover object-left"
                unoptimized
              />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>

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