import React from "react";
import carouselImg from "../../assets/images/offer.jpg";

import { Carousel } from "react-bootstrap";
import { carouselData } from "../../Helper/dummyData";
import style from "./Carousel.module.scss"

const MainCarousel = () => {
  return (
    <>
      <Carousel variant="dark" controls={false} indicators={false} className={`${style.carousel}`} interval={3000}>
        {carouselData?.map((item, inndex) => {
          return (
            <Carousel.Item>
              <img
                className={`d-block w-100 ${style.image}`}
                src={item?.image}
                alt="First slide"
                fluid
              />
            </Carousel.Item>
          );
        })}

        {/* <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Second slide&bg=eee"
            alt="Second slide"
          />
          <Carousel.Caption>
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Third slide&bg=e5e5e5"
            alt="Third slide"
          />
          <Carousel.Caption>
            <h5>Third slide label</h5>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            </p>
          </Carousel.Caption>
        </Carousel.Item> */}
      </Carousel>
    </>
  );
};

export default MainCarousel;
