"use client";
import { motion } from "framer-motion";
import { ny } from "@/lib/utils";

interface BlurIntProps {
	word: string;
	className?: string;
	variant?: {
		hidden: { filter: string; opacity: number };
		visible: { filter: string; opacity: number };
	};
	duration?: number;
}
function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
	const defaultVariants = {
		hidden: { filter: "blur(10px)", opacity: 0 },
		visible: { filter: "blur(0px)", opacity: 1 },
	};
	const combinedVariants = variant || defaultVariants;

	return (
		<motion.h1
			initial="hidden"
			animate="visible"
			transition={{ duration }}
			variants={combinedVariants}
			className={ny(
				className,
				"font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]",
			)}
		>
			{word}
		</motion.h1>
	);
}

export default BlurIn;