"use client";
import React from "react";
import useEmblaCarousel from "embla-carousel-react";
import Image from "next/image";
import "./carousel.css";
import Autoplay from "embla-carousel-autoplay";
import AutoHeight from "embla-carousel-auto-height";

export const EmblaCarousel = () => {
  const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()]);

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container w-full">
        <div className="embla__slide relative w-full">
          <Image
            src="/img01.webp"
            alt="/"
            fill
            style={{ objectFit: "cover", objectPosition: 'center' }} // optional
            quality={100}
          />
        </div>
        <div className="embla__slide relative w-full">
          {" "}
          <Image
            src="/IMG_2431.jpg"
            alt="/"
            fill
            style={{ objectFit: "cover", objectPosition: 'center' }} // optional
            quality={100}
          />
        </div>
        <div className="embla__slide relative w-full">
          {" "}
          <Image
            src="/images/bar01.jpg"
            alt="/"
            fill
            style={{ objectFit: "cover", objectPosition: 'center' }} // optional
            quality={100}
          />
        </div>
      </div>
    </div>
  );
};