"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { type ComponentProps, useEffect, useRef, useState } from "react";
export interface WordRotateProps extends Omit<
  ComponentProps<"span">,
  "children"
> {
  words: readonly string[];
  duration?: number;
  paused?: boolean;
  loop?: boolean;
}
export function WordRotate({
  words,
  duration = 1200,
  paused = false,
  loop = false,
  className = "",
  ...props
}: WordRotateProps) {
  const [index, setIndex] = useState(0);
  const key = JSON.stringify(words);
  const current = useRef(0);
  useEffect(() => {
    current.current = 0;
    setIndex(0);
  }, [key]);
  useEffect(() => {
    const media = matchMedia("(prefers-reduced-motion: reduce)");
    let timer: ReturnType<typeof setInterval> | undefined;
    const start = () => {
      clearInterval(timer);
      if (media.matches) {
        current.current = 0;
        setIndex(0);
        return;
      }
      if (paused || words.length < 2) return;
      timer = setInterval(
        () => {
          const next = current.current + 1;
          if (next >= words.length && !loop) {
            clearInterval(timer);
            return;
          }
          current.current = next % words.length;
          setIndex(current.current);
        },
        Number.isFinite(duration) ? Math.max(250, duration) : 1200,
      );
    };
    start();
    media.addEventListener("change", start);
    return () => {
      clearInterval(timer);
      media.removeEventListener("change", start);
    };
  }, [key, duration, paused, loop]);
  return (
    <span {...props} className={`ynr-word-rotate ${className}`}>
      <span className="ynr-motion-sr">{words.join(", ")}</span>
      <span className="ynr-word-rotate-sizing" aria-hidden="true">
        {words.map((word, i) => (
          <span key={i}>{word}</span>
        ))}
      </span>
      <span
        key={`${key}:${index}`}
        className="ynr-word-rotate-current"
        aria-hidden="true"
      >
        {words[index] ?? words[0] ?? ""}
      </span>
    </span>
  );
}