"use client";

import { useEffect, useState } from "react";

/** Cycles through `words` on an interval — a lightweight stand-in for the reference's
 *  Elementor Pro "Animated Headline" widget (before/highlighted/rotating/after text). */
export default function RotatingHeadline({
  before,
  highlighted,
  words,
  after
}: {
  before: string;
  highlighted: string;
  words: string[];
  after: string;
}) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setIndex((i) => (i + 1) % words.length), 2200);
    return () => clearInterval(id);
  }, [words.length]);

  return (
    <h1 className="font-display font-black text-[32px] sm:text-[44px] lg:text-[54px] leading-[1.08] tracking-[-0.02em] text-ink">
      {before}{" "}
      <span className="text-accent-500">{highlighted}</span>{" "}
      <span className="inline-block text-gold-600 min-w-[1ch]" aria-live="polite">
        {words[index]}
      </span>{" "}
      {after}
    </h1>
  );
}