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

const MainSlider = dynamic(() => import("./HomeSliderComponent/MainSlider"), {
  ssr: false,
  loading: () => (
    <div
      className="d-flex justify-content-center align-items-center"
      style={{ height: "250px" }}
    >
      <div className="spinner-border text-primary" role="status">
        <span className="visually-hidden">Loading...</span>
      </div>
    </div>
  ),
});
const SideSlider = dynamic(() => import("./HomeSliderComponent/SideSlider"), {
  ssr: false,
  loading: () =>   <div
      className="d-flex justify-content-center align-items-center"
      style={{ height: "150px" }}
    >
      <div className="spinner-border text-primary" role="status">
        <span className="visually-hidden">Loading...</span>
      </div>
    </div>,
});

const HomeSlider = ({ 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();

 

  return (
    <div className="container-fluid mb-3 mt-1">
      <div className="row">
   
        <div className="col-md-8 d-flex px-2 justify-content-center align-items-center">
          <MainSlider slider={slider} />
        </div>

       
        <div className="col-md-4 d-flex flex-column gap-3">
          <div className="row">
            <div className="col-6 col-md-12 p-2">
              <SideSlider banner={banner} />
           
            </div>
            <div className="col-6 col-md-12 d-flex flex-column gap-3 p-2">
              <SideSlider banner={ads2} />
               
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomeSlider;
