"use client";
import React from "react";
import { Carousel } from "react-bootstrap";
import { URL } from "../../url";
import Image from "next/image";

function SideSlider({banner}) {
  return (
    <>
      {" "}
      <Carousel
        fade
        interval={2000}
        controls={false}
        indicators={false}
        className="flex-fill"
      >
        {banner &&
          banner.length > 0 &&
          banner.map((item, index) => (
          
              <Carousel.Item key={index} className="side-slider">
                          <div
                            className="position-relative w-100"
                            style={{ aspectRatio: "6/2" }}
                          >
                            <Image
                              src={URL?.API_BASE_URL + item.image}
                              alt={`Slide ${index + 1}`}
                              fill
                              style={{ objectFit: "cover" }}
                              priority
                            />
                          </div>
                        </Carousel.Item>
          ))}
            {/* <Carousel.Item key={index} className="side-slider">
              <img
                src={URL?.API_BASE_URL + item.image}
                alt={`Side Slide ${index + 1}`}
                className="img-fluid flex-fill"
              />
            </Carousel.Item> */}
      </Carousel>
    </>
  );
}

export default SideSlider;
