"use client";
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Carousel } from "react-bootstrap";
import { URL } from "../url";

const HomeSliderClint = ({ sliderList }) => {
  const slider_list = sliderList || {};
  const slider = slider_list?.sliders ? slider_list?.sliders : [];
  const ad = slider_list?.ads ? slider_list?.ads : [];
  const banner = slider_list?.banner ? slider_list?.banner : [];
  const ads2 = [...banner].reverse();

  // console.log(slider);
  // console.log(banner);
  // console.log(ads2);

  return (
    <div className="container-fluid mb-3 mt-1">
      <div className="row">
        {/* 8-col Auto Slider */}
        <div className="col-md-8 d-flex px-2">
          <Carousel
            fade
            interval={1000}
            controls={false}
            indicators={false}
            className="flex-fill"
          >
            {slider &&
              slider.length > 0 &&
              slider.map((item, index) => (
                <Carousel.Item key={index} className="h-100 main-slider">
                  <img
                    src={URL?.API_BASE_URL + item.image}
                    alt={`Slide ${index + 1}`}
                    className="d-block w-100 h-100"
                  />
                </Carousel.Item>
              ))}
            {/* <Carousel.Item className="h-100 main-slider">
              <img
                src={"./images/A.jpeg"}
                alt="Slide 1"
                className="d-block w-100 h-100"
              />
            </Carousel.Item>
            <Carousel.Item className="h-100 main-slider">
              <img
                src={"./images/B.jpeg"}
                alt="Slide 2"
                className="d-block w-100 h-100"
              />
            </Carousel.Item>
            <Carousel.Item className="h-100 main-slider">
              <img
                src={"./images/C.jpeg"}
                alt="Slide 3"
                className="d-block w-100 h-100"
              />
            </Carousel.Item> */}
          </Carousel>
        </div>

        {/* 4-col stacked sliders */}
        <div className="col-md-4 d-flex flex-column gap-3">
          <div className="row">
            <div className="col-6 col-md-12 p-2">
              <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">
                      <img
                        src={URL?.API_BASE_URL + item.image}
                        alt={`Side Slide ${index + 1}`}
                        className="img-fluid flex-fill"
                      />
                    </Carousel.Item>
                  ))}
                {/* <Carousel.Item className="side-slider">
                  <img
                    src={"./images/D.jpeg"}
                    alt="Side Slide 1"
                    className="img-fluid flex-fill"
                  />
                </Carousel.Item>
                <Carousel.Item className="side-slider">
                  <img
                    src={"./images/E.jpeg"}
                    alt="Side Slide 2"
                    className="img-fluid flex-fill"
                  />
                </Carousel.Item>
                <Carousel.Item className="side-slider">
                  <img
                    src={"./images/F.jpeg"}
                    alt="Side Slide 3"
                    className="img-fluid flex-fill"
                  />
                </Carousel.Item> */}
              </Carousel>
            </div>
            <div className="col-6 col-md-12 d-flex flex-column gap-3 p-2">
              <Carousel
                fade
                interval={2000}
                controls={false}
                indicators={false}
                className="flex-fill"
              >
                {ads2 &&
                  ads2.length > 0 &&
                  ads2.map((item, index) => (
                    <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.Item className="side-slider">
                  <img
                    src={"./images/D.jpeg"}
                    alt="Side Slide 1"
                    className="img-fluid flex-fill"
                  />
                </Carousel.Item>
                <Carousel.Item className="side-slider">
                  <img
                    src={"./images/E.jpeg"}
                    alt="Side Slide 2"
                    className="img-fluid flex-fill"
                  />
                </Carousel.Item>
                <Carousel.Item className="side-slider">
                  <img
                    src={"./images/C.jpeg"}
                    alt="Side Slide 3"
                    className="img-fluid flex-fill"
                  />
                </Carousel.Item> */}
              </Carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomeSliderClint;
