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";

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


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

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

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

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

      {/* Render the Current Image */}
      <Box
        key={currentIndex}
        component="img"
        src={activeItems[currentIndex].img_src}
        alt={activeItems[currentIndex].alt_name}
        sx={{
          width: "100%",
          objectFit: "cover",
          transition: "opacity 0.5s ease-in-out",
          zIndex: 0,
        }}
      />

      {/* Navigation Buttons */}
      <IconButton
        onClick={handlePrev}
        sx={{
          position: "absolute",
          left: "10px",
          top: "50%",
          transform: "translateY(-50%)",
          zIndex: 10,
          color: "white",
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
        }}
        aria-label="Previous Slide"
      >
        <ArrowBackIosIcon />
      </IconButton>

      <IconButton
        onClick={handleNext}
        sx={{
          position: "absolute",
          right: "10px",
          top: "50%",
          transform: "translateY(-50%)",
          zIndex: 10,
          color: "white",
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
        }}
        aria-label="Next Slide"
      >
        <ArrowForwardIosIcon />
      </IconButton>
    </Box>
  );
};

export default Carousel;
