"use client";

import { ReactNode, useEffect, useRef, useState } from "react";

interface Style3SliderProps {
  children: ReactNode[];
  interval?: number;
}

export default function Style3Slider({ children, interval = 5000 }: Style3SliderProps) {
  const [active, setActive] = useState(0);
  const prevRef = useRef(0);
  const count = children.length;

  useEffect(() => {
    if (count <= 1) return;
    const id = setInterval(() => {
      setActive((a) => {
        prevRef.current = a;
        return (a + 1) % count;
      });
    }, interval);
    return () => clearInterval(id);
  }, [count, interval]);

  return (
    <section className="main-slider style3">
      <div
        className="rev_slider_wrapper fullwidthbanner-container"
        id="rev_slider_one_wrapper"
        data-source="gallery"
      >
        <div className="rev_slider fullwidthabanner" id="rev_slider_three" data-version="5.4.1">
          <ul style={{ position: "relative", height: "100%", listStyle: "none", margin: 0, padding: 0 }}>
            {children.map((slide, i) => {
              const visible = i === active || i === prevRef.current;
              return (
                <li
                  key={i}
                  data-description="Slide Description"
                  data-easein="default"
                  data-easeout="default"
                  data-fsmasterspeed="1500"
                  data-fsslotamount="7"
                  data-fstransition="fade"
                  data-hideafterloop="0"
                  data-hideslideonmobile="off"
                  data-index="rs-1689"
                  data-masterspeed="default"
                  data-param1=""
                  data-param10=""
                  data-param2=""
                  data-param3=""
                  data-param4=""
                  data-param5=""
                  data-param6=""
                  data-param7=""
                  data-param8=""
                  data-param9=""
                  data-rotate="0"
                  data-saveperformance="off"
                  data-slotamount="default"
                  data-title="Slide Title"
                  style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                    listStyle: "none",
                    margin: 0,
                    padding: 0,
                    visibility: visible ? "visible" : "hidden",
                    opacity: i === active ? 1 : 0,
                    transition: "opacity 1500ms ease",
                    pointerEvents: i === active ? "auto" : "none",
                  }}
                >
                  {slide}
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}