import { useRouter } from 'next/router';
import { motion } from 'framer-motion';
import { alertAnimation } from '../../variants';
import CheckMark from './CheckMark';

const AlertMessage = ({ type, closeAlert }) => {
    const { locale } = useRouter();
    return (
        <motion.div
            className={`fixed top-[5.625rem] right-2 z-[99] w-[90%] ${
                type ? 'max-w-[27.5rem]' : 'max-w-[21.875rem]'
            } overflow-hidden rounded-md bg-alabaster text-sm shadow-card-hover`}
            {...alertAnimation.modal}
            id='form-alert'
        >
            <div className='relative flex items-center p-4'>
                <button
                    className='absolute right-2 top-0 text-4xl text-gray-700 hover:opacity-70'
                    onClick={closeAlert}
                    aria-label={
                        locale === 'en'
                            ? 'Close Alert'
                            : locale === 'fr'
                            ? "Fermer l'alerte"
                            : 'Cerrar Alerta'
                    }
                >
                    &times;
                </button>
                <CheckMark
                    color={`${type ? 'stroke-red-700' : 'stroke-lime-600'}`}
                    styles='w-[1.875rem] mr-3'
                    type={type}
                />
                {type ? (
                    <p>
                        {locale === 'fr'
                            ? "Oups, quelque chose s'est mal passé. Veuillez réessayer plus tard."
                            : locale === 'en'
                            ? 'Oops, something went wrong. Please try again later.'
                            : 'Oops, ocurrió un error. Por favor inténtelo más tarde.'}
                    </p>
                ) : (
                    <p id='success-msg-popup'>
                        {locale === 'fr'
                            ? 'Votre message a été envoyé!'
                            : locale === 'en'
                            ? 'Your message was sent successfully!'
                            : '¡Tu mensaje fue enviado con éxito!'}
                    </p>
                )}
            </div>
            <div className='absolute bottom-0 h-[0.375rem] w-full bg-gray-300'>
                <motion.span
                    className={`block h-full w-0 ${
                        type ? 'bg-red-700' : 'bg-lime-600'
                    }`}
                    {...alertAnimation.progress}
                    onAnimationComplete={closeAlert}
                ></motion.span>
            </div>
        </motion.div>
    );
};

export default AlertMessage;