import { useEffect, useState } from 'react';

interface Props {
  roles: string[];
  interval?: number;
}

export default function RolesMorph({ roles, interval = 2600 }: Props) {
  const [idx, setIdx] = useState(0);
  const [glitch, setGlitch] = useState(false);

  useEffect(() => {
    if (roles.length <= 1) return;
    const timer = setInterval(() => {
      setGlitch(true);
      setTimeout(() => {
        setIdx((i) => (i + 1) % roles.length);
        setGlitch(false);
      }, 180);
    }, interval);
    return () => clearInterval(timer);
  }, [roles, interval]);

  const current = roles[idx] ?? '';

  return (
    <span
      className={`inline-block font-display text-[color:var(--color-cyan)] glow-text-cyan transition-all duration-200 ${
        glitch ? 'blur-[1px] opacity-60 skew-x-3' : ''
      }`}
      data-text={current}
    >
      {current}
    </span>
  );
}
