import Autoplay from 'embla-carousel-autoplay'
import useEmblaCarousel from 'embla-carousel-react'
import { Link } from 'react-router'

import { BANNER } from '~/data/contents'

export const Banner = () => {
  const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])

  return (
    <div className="">
      <div className="relative">
        <div
          className="embla overflow-hidden"
          ref={emblaReference}
        >
          <div className="embla__container flex">
            {BANNER.map(({ urlImage, alt, link }, index) => (
              <div
                key={index}
                className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
              >
                <Link
                  to={link}
                  className="mt-2 h-full py-2"
                >
                  <img
                    src={urlImage}
                    alt={alt}
                    className="h-[70px] w-[100%] content-center sm:h-full"
                  />
                </Link>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}