Header Text Line Reveal

"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import styles from "./styles.module.css";

export default function HeaderTextLineReveal({ lines = [], subtitle = "" }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    const lineEls = el.querySelectorAll(`.${styles.lineInner}`);

    gsap.from(lineEls, {
      yPercent: 110,
      duration: 1,
      stagger: 0.08,
      ease: "power3.out",
      delay: 0.1,
    });
  }, []);

  return (
    <header ref={containerRef} className={styles.header}>
      <div className={styles.lines}>
        {lines.map((line, i) => (
          <div key={i} className={styles.lineOuter}>
            <span className={styles.lineInner}>{line}</span>
          </div>
        ))}
      </div>
      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
    </header>
  );
}