import { useState } from 'react';
import { motion, useAnimation } from 'framer-motion';

const FormBorder = () => {
    const [isAnimationComplete, setAnimationComplete] = useState(false);
    const bgAnimation = useAnimation();

    const handleAnimationComplete = () => {
        setAnimationComplete(true);
        bgAnimation.start({ opacity: 1, transition: { duration: 1 } });
    };

    return (
        <motion.svg
            width='327'
            height='338'
            viewBox='0 0 327 398'
            fill='none'
            className='min-h-[450px] w-full max-w-[22.5rem] fill-none stroke-white stroke-1 md:h-[450px] md:max-w-[33.125rem] lg:h-[500px] xl:h-[75%] 4xl:max-h-[37.5rem]'
            xmlns='http://www.w3.org/2000/svg'
            preserveAspectRatio='none'
            id='formVignetteImg'
        >
            <motion.path
                d='M25.6814 0H290.428C304.609 0 316.109 11.3798 316.109 25.4133V366.664L326.561 390.732C328.22 394.534 324.927 398.644 320.811 397.915L287.572 392.077H25.6814C11.4999 392.077 0 380.698 0 366.664V25.4133C0 11.3798 11.4999 0 25.6814 0Z'
                fill='none'
                strokeDasharray='1401'
                strokeDashoffset='1401'
                initial={{ strokeDashoffset: 1401 }}
                animate={{ strokeDashoffset: 0 }}
                transition={{ duration: 2, delay: 2 }}
                onAnimationComplete={handleAnimationComplete}
            />

            <motion.path
                d='M25.6814 0H290.428C304.609 0 316.109 11.3798 316.109 25.4133V366.664L326.561 390.732C328.22 394.534 324.927 398.644 320.811 397.915L287.572 392.077H25.6814C11.4999 392.077 0 380.698 0 366.664V25.4133C0 11.3798 11.4999 0 25.6814 0Z'
                fill='white'
                initial={{ opacity: 0 }}
                animate={bgAnimation}
            />
        </motion.svg>
    );
};

export default FormBorder;