"use client";

import { useEffect, useState } from "react";

type RotatingHeadlineProps = {
  items: string[];
  subtext: string;
  intervalSeconds?: number;
};

export default function RotatingHeadline({
  items,
  subtext,
  intervalSeconds = 3,
}: RotatingHeadlineProps) {
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    if (items.length <= 1) return;

    const id = setInterval(() => {
      setActiveIndex((i) => (i + 1) % items.length);
    }, intervalSeconds * 1000);

    return () => clearInterval(id);
  }, [items.length, intervalSeconds]);

  return (
    <div className="space-y-2">
      {/* rotating row — key forces remount so a CSS transition can fire */}
      <div className="text-2xl">
        <span key={activeIndex}>{items[activeIndex]}</span>
      </div>

      {/* static row */}
      <div className="text-neutral-400">{subtext}</div>
    </div>
  );
}