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 mainImage from "../../assets/images/mainwallpaper.jpg"
import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg"

const Carousel = () => {

  const items = [
    { img_src: mainImage, alt_name: "Image 1" }
  ]

  const items_mobile = [
    { img_src: mainImageMobile, alt_name: "Image 1" }
  ]

  const [currentIndex, setCurrentIndex] = React.useState(0);

  const handlePrev = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? items.length - 1 : prevIndex - 1
    );
  };

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === items.length - 1 ? 0 : prevIndex + 1
    );
  };

  return (
    <Box
      sx={{
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        objectPosition: "top center",
        overflow: "hidden",
      }}
    >
      {/* Filter */}
      <Box sx={{
        position: "absolute",
        top: 0,
        right: 0,
        backgroundColor: "rgba(0, 0, 0, 0.2)",
        width: "100%",
        height: "100%"
      }}></Box>

      {items.map((item, index) => (
        <Box
          key={index}
          component="img"
          src={item.img_src}
          alt={item.alt_name}
          sx={{
            width: "100%",
            height: "100%",
            backgroundImage: `url(${item.img_src})`,
            objectFit: "cover",
            objectPosition: "center center",
          }}
        />
      ))}



    </Box>
  );
};

export default Carousel;