import React from "react";
import { Box, IconButton } from "@mui/material";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import mainImage1 from "../../assets/images/MAINHEADER-01.webp";
import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
import mainImage3 from "../../assets/images/MAINHEADER-03.webp";
import mainImage4 from "../../assets/images/MAINHEADER-04.webp";
import mainImage5 from "../../assets/images/MAINHEADER-05.webp";
import mainImage6 from "../../assets/images/MAINHEADER-06.webp";
import mainImage7 from "../../assets/images/MAINHEADER-07.webp";
import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
import { Carousel } from 'react-responsive-carousel';

const CarouselContainer = () => {

  const items = [
    { img_src: mainImage7, alt_name: "Image 7" },
    { img_src: mainImage6, alt_name: "Image 6" },
    { img_src: mainImage5, alt_name: "Image 5" },
    { img_src: mainImage3, alt_name: "Image 3" },
    { img_src: mainImage4, alt_name: "Image 4" },
    { img_src: mainImage2, alt_name: "Image 2" },
    { img_src: mainImage1, alt_name: "Image 1" },
    { img_src: mainImage7, alt_name: "Image 7" },
    { img_src: mainImage6, alt_name: "Image 6" },
    { img_src: mainImage5, alt_name: "Image 5" },
    { img_src: mainImage3, alt_name: "Image 3" },
    { img_src: mainImage4, alt_name: "Image 4" },
    { img_src: mainImage2, alt_name: "Image 2" },
    { img_src: mainImage1, alt_name: "Image 1" },
  ];

  return (

    <Carousel showStatus={false} autoPlay={true} infiniteLoop={true} interval={5000} showIndicators={false} stopOnHover={false}>
      {items?.map(({ img_src, alt_name }, index) => (
        <Box
          key={index}
          component="img"
          src={img_src}
          alt={alt_name}
          sx={{
            width: "100%",
            height: "100%",
            zIndex: 0,
            filter:"brightness(0.9)"
          }}
        />
      ))}
    </Carousel>


  );
};

export default CarouselContainer;