"use client"; import type { Variants } from "motion/react"; import { motion, useAnimation } from "motion/react"; import type { HTMLAttributes } from "react"; import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { cn } from "@/lib/utils"; export interface CreditCardIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface CreditCardIconProps extends HTMLAttributes { size?: number; } const LINE_VARIANTS: Variants = { visible: { pathLength: 1, opacity: 1 }, hidden: { pathLength: 0, opacity: 0 }, }; const CreditCardIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const isControlledRef = useRef(false); useImperativeHandle(ref, () => { isControlledRef.current = true; return { startAnimation: async () => { await controls.start((i) => ({ pathLength: 0, opacity: 0, transition: { delay: i * 0.1, duration: 0.3 }, })); await controls.start((i) => ({ pathLength: 1, opacity: 1, transition: { delay: i * 0.1, duration: 0.3 }, })); }, stopAnimation: () => controls.start("visible"), }; }); const handleMouseEnter = useCallback( async (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseEnter?.(e); } else { await controls.start((i) => ({ pathLength: 0, opacity: 0, transition: { delay: i * 0.1, duration: 0.3 }, })); await controls.start((i) => ({ pathLength: 1, opacity: 1, transition: { delay: i * 0.1, duration: 0.3 }, })); } }, [controls, onMouseEnter] ); const handleMouseLeave = useCallback( (e: React.MouseEvent) => { if (isControlledRef.current) { onMouseLeave?.(e); } else { controls.start("visible"); } }, [controls, onMouseLeave] ); return (

); } ); CreditCardIcon.displayName = "CreditCardIcon"; export { CreditCardIcon };