"use client";

import { animate, motion, useMotionValue, useTransform } from "framer-motion";
import { Special_Elite } from "next/font/google";
import React, { useEffect } from "react";

const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });

type props = {
  children: string;
  styles: string;
  duration: number;
  delay: number;
};

const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
  const count = useMotionValue(0);
  const baseText = children as string;

  const rounded = useTransform(count, (latest) => Math.round(latest));
  const displayText = useTransform(rounded, (latest) =>
    baseText.slice(0, latest)
  );

  useEffect(() => {
    // Delay the animation start
    const delayTimeout = setTimeout(() => {
      const controls = animate(count, baseText.length, {
        duration: duration,
        ease: "easeInOut",
      });
      return () => controls.stop();
    }, delay * 1000);

    // Clear the timeout on unmount to prevent memory leaks
    return () => clearTimeout(delayTimeout);
  }, []);

  return (
    <>
      <motion.span className={`${special_elite.className} ${styles}`}>
        {displayText}
      </motion.span>
    </>
  );
};

export default FramerTextAnimate;