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

function MainSlider({ slider }) {
  return (
    <>
      <Carousel
        fade
        interval={1000}
        controls={false}
        indicators={false}
        className="flex-fill"
      >
        {slider &&
          slider.length > 0 &&
          slider.map((item, index) => (
            <Carousel.Item key={index} className="main-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>
    </>
  );
}

export default MainSlider;
