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 mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
import Carousel from 'react-material-ui-carousel'

const CarouselContainer = () => {

  const items = [
    { img_src: mainImage1, alt_name: "Image 1" },
    { img_src: mainImage2, alt_name: "Image 2" },
  ];

  return (

    <Carousel indicators={false} autoPlay={true} interval={3000}>
      {items?.map(({ img_src, alt_name }, index) => (
        <Box
          key={index}
          component="img"
          src={img_src}
          alt={alt_name}
          sx={{
            width: "100%",
            objectFit: "cover",
            transition: "opacity 0.5s ease-in-out",
            zIndex: 0,
          }}
        />
      ))}

    </Carousel>


  );
};

export default CarouselContainer;