import React from "react";
import useEmblaCarousel from "embla-carousel-react";
import Image from "next/image";
import Autoplay from 'embla-carousel-autoplay';

export const EmblaCarousel = () => {
  const [emblaRef] = useEmblaCarousel();

  return (
    <div className="overflow-hidden" ref={emblaRef}>
      <div className="flex">
        <div className="carousel">
          <Image
            src="/images/bar01.jpg"
            alt="bar01"
            fill
            style={{ objectFit: "cover" }}
            quality={100}
          />
        </div>
        <div className="embla__slide">
          <Image
            src="/images/food01.jpg"
            alt="food1"
            fill
            style={{ objectFit: "cover" }}
            quality={100}
          />
        </div>
      </div>
      <div className="embla__slide">
        {" "}
        <Image
          src="/images/food02.webp"
          alt="food2"
          fill
          style={{ objectFit: "cover" }}
          quality={100}
        />
      </div>
    </div>
  );
};