"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(), AutoHeight()]);

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">
          <Image
            src="/img01.webp"
            alt="/"
            width={0}
            height={0}
            sizes="100vw"
            style={{ width: "100%", height: "auto" }} // optional
          />
        </div>
        <div className="embla__slide">
          {" "}
          <Image
            src="/IMG_2431.jpg"
            alt="/"
            width={0}
            height={0}
            sizes="100vw"
            style={{ width: "100%", height: "auto" }} // optional
          />
        </div>
        <div className="embla__slide">
          {" "}
          <Image
            src="/images/bar01.jpg"
            alt="/"
            width={0}
            height={0}
            sizes="100vw"
            style={{ width: "100%", height: "auto" }} // optional
          />
        </div>
      </div>
    </div>
  );
};