"use client";

import { useEffect, useState, type RefObject } from "react";

type Props = {
  sectionRef: RefObject<HTMLElement | null>;
  title: string;
  offset?: number;
};

export function SectionScrollTitle({ sectionRef, title, offset = 350 }: Props) {
  const [offsetX, setOffsetX] = useState(0);

  useEffect(() => {
    const section = sectionRef.current;
    if (!section) return;

    const update = () => {
      const rect = section.getBoundingClientRect();
      const viewportHeight = window.innerHeight;
      const progress = Math.min(
        1,
        Math.max(0, (viewportHeight - rect.top) / (viewportHeight + rect.height * 0.5)),
      );
      setOffsetX(progress * offset);
    };

    update();
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, [sectionRef, offset]);

  return (
    <span
      className="pointer-events-none absolute bottom-0 left-1/2 z-0 select-none whitespace-nowrap text-7xl font-bold leading-none text-white/[0.04] sm:text-8xl lg:text-9xl"
      style={{ transform: `translateX(calc(-50% + ${offsetX}px))` }}
      aria-hidden="true"
    >
      {title}
    </span>
  );
}