"use client";

import { useEffect, useState } from "react";

import { cn } from "@/lib/utils";

// Cycling typewriter: types a word, pauses, deletes it, then moves to the
// next — looping forever. Used inline (e.g. the AI name in the MCP title).
export const TypewriterCycle = ({
  words,
  className,
  cursorClassName,
}: {
  words: string[];
  className?: string;
  cursorClassName?: string;
}) => {
  const [index, setIndex] = useState(0);
  const [sub, setSub] = useState(0);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    const current = words[index % words.length] ?? "";

    if (!deleting && sub === current.length) {
      const t = setTimeout(() => setDeleting(true), 1500);
      return () => clearTimeout(t);
    }
    if (deleting && sub === 0) {
      setDeleting(false);
      setIndex((i) => (i + 1) % words.length);
      return;
    }
    const t = setTimeout(
      () => setSub((s) => s + (deleting ? -1 : 1)),
      deleting ? 45 : 95,
    );
    return () => clearTimeout(t);
  }, [sub, deleting, index, words]);

  const current = words[index % words.length] ?? "";

  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        whiteSpace: "nowrap",
      }}
    >
      <span className={className}>{current.substring(0, sub)}</span>
      <span
        aria-hidden
        className={cn(
          "bg-gradient-brand ml-0.5 inline-block h-[0.85em] w-[3px] translate-y-[0.06em] rounded-full",
          "animate-pulse",
          cursorClassName,
        )}
      />
    </span>
  );
};