'use client';
import { useEffect, useState } from 'react';

const words = ['Developer.', 'Designer.', 'Creator.', 'Engineer.'];

export const TypingHeader = () => {
  const [wordIndex, setWordIndex] = useState(0);
  const [displayedText, setDisplayedText] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    const currentWord = words[wordIndex % words.length];

    const timeout = setTimeout(() => {
      const nextText = isDeleting
        ? currentWord.slice(0, displayedText.length - 1)
        : currentWord.slice(0, displayedText.length + 1);

      setDisplayedText(nextText);

      if (!isDeleting && nextText === currentWord) {
        setTimeout(() => setIsDeleting(true), 1000);
      } else if (isDeleting && nextText === '') {
        setIsDeleting(false);
        setWordIndex((prev) => (prev + 1) % words.length);
      }
    }, isDeleting ? 50 : 100);

    return () => clearTimeout(timeout);
  }, [displayedText, isDeleting, wordIndex]);

  return (
    <h1 className="text-4xl md:text-6xl font-bold text-center text-black dark:text-white">
      I am a <span className="text-blue-500">{displayedText}</span>
      <span className="ml-1 animate-blink">|</span>
    </h1>
  );
};