"use client";

import type { Variants } from "framer-motion";
import { AnimatePresence, motion } from "framer-motion";
import { ny } from "@/lib/utils";

interface GradualSpacingProps {
	text: string;
	duration?: number;
	delayMultiple?: number;
	framerProps?: Variants;
	className?: string;
}

export default function GradualSpacing({
	text,
	duration = 0.5,
	delayMultiple = 0.04,
	framerProps = {
		hidden: { opacity: 0, x: -20 },
		visible: { opacity: 1, x: 0 },
	},
	className,
}: GradualSpacingProps) {
	return (
		<div className="flex justify-center space-x-1">
			<AnimatePresence>
				{text.split("").map((char, i) => (
					<motion.h1
						key={i}
						initial="hidden"
						animate="visible"
						exit="hidden"
						variants={framerProps}
						transition={{ duration, delay: i * delayMultiple }}
						className={ny("drop-shadow-sm", className)}
					>
						{char === " " ? <span>&nbsp;</span> : char}
					</motion.h1>
				))}
			</AnimatePresence>
		</div>
	);
}