"use client";

import { cn } from "@/lib/utils";
import { motion, stagger, useAnimate, useInView } from "framer-motion";
import { useEffect } from "react";

type Word = {
  text: string;
  className?: string;
};

type Props = {
  words: Word[];
  className?: string;
  cursorClassName?: string;
};

export function TypewriterEffect({
  words,
  className,
  cursorClassName,
}: Props) {
  const wordsArray = words.map((word) => ({
    ...word,
    chars: word.text.split(""),
  }));

  const [scope, animate] = useAnimate();
  const isInView = useInView(scope, { once: true });

  useEffect(() => {
    if (isInView) {
      animate(
        "span.char",
        { opacity: 1 },
        {
          duration: 0.25,
          delay: stagger(0.08),
          ease: "easeInOut",
        }
      );
    }
  }, [isInView, animate]);

  return (
    <div
      className={cn(
        "flex items-center justify-center text-base sm:text-xl md:text-3xl lg:text-5xl font-bold",
        className
      )}
    >
      <motion.div ref={scope} className="inline">
        {wordsArray.map((word, wordIndex) => (
          <span key={wordIndex} className="inline-block mr-2">
            {word.chars.map((char, charIndex) => (
              <motion.span
                key={charIndex}
                className={cn(
                  "char opacity-0 inline-block dark:text-white text-black",
                  word.className
                )}
              >
                {char}
              </motion.span>
            ))}
          </span>
        ))}
      </motion.div>

      {/* Cursor */}
      <motion.span
        className={cn(
          "ml-1 inline-block w-[4px] h-5 md:h-8 lg:h-10 bg-blue-500 rounded-sm",
          cursorClassName
        )}
        animate={{ opacity: [0, 1] }}
        transition={{
          duration: 0.8,
          repeat: Infinity,
          repeatType: "reverse",
        }}
      />
    </div>
  );
}