LampContainer

"use client";

import React, { useEffect, useRef } from "react";
import { useReducedMotion } from "framer-motion";
import { LampContainer } from "@/components/ui/lamp-container";

function LampDemo() {
  const prefersReduced = useReducedMotion();
  const headingRef = useRef<HTMLHeadingElement | null>(null);
  const words = ["Build", "lamps", "the", "right", "way"];

  useEffect(() => {
    if (prefersReduced) {
      // do not run intersection observer when reduced motion is preferred
      return;
    }
    const el = headingRef.current;
    if (!el) return;

    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            el.classList.add("animate-words");
            obs.unobserve(el);
          }
        });
      },
      { threshold: 0.35 }
    );

    obs.observe(el);
    return () => obs.disconnect();
  }, [prefersReduced]);

  return (
    <LampContainer>
      <h1
        ref={headingRef}
        className="mt-8 hero-gradient text-center text-4xl font-medium tracking-tight md:text-7xl words-container"
        aria-hidden={false}
      >
        {words.map((word, idx) => (
          <span
            key={`${word}-${idx}`}
            className="word"
            style={{ ["--delay" as any]: `${idx * 0.18 + 0.25}s` }}
          >
            {word}
            {idx === 1 ? <br /> : " "}
          </span>
        ))}
      </h1>
    </LampContainer>
  );
}

export const Preview = LampDemo;
export const Demo = LampDemo;
export default LampDemo;