import React, { useState } from "react";
import Slider from "react-slick";
import tents from "../assets/tents.png";
import prepare from "../assets/prepare.png";
import comingSoon from "../assets/comingsoon.jpg";

const Banner = () => {
  const [Active, setActive] = useState(0);
  const settings = {
    dots: true,
    infinite: true,
    slidesToShow: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToScroll: 1,
    arrows: false,
    pauseOnHover: true,
    beforeChange: (prev, next) => {
      setActive(next);
    },
    appendDots: (dots) => (
      <div
        style={{
          position: "absolute",
          top: "95%",
          left: "45%",
          transform: "translate(-50%, -50%)",
          width: "210px",
        }}
      >
        <ul
          style={{
            width: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          {" "}
          {dots}{" "}
        </ul>
      </div>
    ),
    customPaging: (i) => (
      <div
        style={i===Active ? {
          width: "30px",
          color: "blue",
          border: "1px solid rgb(34, 139, 34)",
          borderRadius: "50%",
          display:"flex",
          alignItems:"center",
          justifyContent:"center",
          color: "white",
          background: "#131921",
          padding: "3px 0",
          cursor:"pointer",
        } : {
            width: "30px",
            color: "blue",
            border: "1px solid rgb(34, 139, 34)",
            borderRadius: "50%",
            display:"flex",
            alignItems:"center",
            justifyContent:"center",
            color: "white",
            background: "#232F3E",
            padding: "3px 0",
            cursor:"pointer",
          }}
      >
        {i + 1}
      </div>
    ),
  };
  return (
    <div className="w-full">
      <div className="w-full max-w-container mx-auto h-full relative">
        <Slider {...settings}>
          <div className="mx-auto">
            <img src={comingSoon} alt="Tents and camping supplies" />
          </div>
          <div>
            <img src={prepare} alt="Be prepared when disaster strikes" />
          </div>
          <div >
            <img src={tents} alt="Tents and camping supplies" />
          </div>
          <div>
            <img src={prepare} alt="Be prepared when disaster strikes" />
          </div>
          <div >
            <img src={tents} alt="Tents and camping supplies" />
          </div>
          <div>
            <img src={prepare} alt="Be prepared when disaster strikes" />
          </div>
        </Slider>
      </div>
    </div>
  );
};

export default Banner;
