"use client";

import { useEffect } from "react";

export function useEqualHeight(
  swiperRef: React.RefObject<any | null>,
  enabled: boolean,
  deps: any[] = []
) {
  useEffect(() => {
    if (!enabled) return;
    if (!swiperRef.current?.el) return;

    const slides = swiperRef.current.el.querySelectorAll(
      ".swiper-slide"
    ) as NodeListOf<HTMLElement>;

    if (!slides.length) return;

    const equalizeHeights = () => {
      slides.forEach((slide) => {
        slide.style.height = "auto";
      });

      const maxHeight = Math.max(
        ...Array.from(slides).map((s) => s.scrollHeight)
      );

      slides.forEach((slide) => {
        slide.style.height = `${maxHeight}px`;
      });
    };

    const timeout = setTimeout(equalizeHeights, 50);

    window.addEventListener("resize", equalizeHeights);

    const observer = new ResizeObserver(equalizeHeights);
    slides.forEach((slide) => observer.observe(slide));

    return () => {
      clearTimeout(timeout);
      window.removeEventListener("resize", equalizeHeights);
      observer.disconnect();
    };
  }, [swiperRef, enabled, ...deps]);
}