import { cartoes } from '@/utils/constants/selectConstants';
import { onlyNumbers } from '@/utils/functions';
import Image, { StaticImageData } from 'next/image';
import { useEffect, useState } from 'react';

const FrontCreditCard = ({
    creditCardNumber = '1234123412341234',
    creditCardName = 'John H. Smith',
    creditCardMonth = '09',
    creditCardYear = '25'
}) => {
    const [flagCreditCard, setFlagCreditCard] = useState<StaticImageData>();
    
    const imageBgFront = creditCardNumber ? 'bg-[url(/assets/Images/ImageCheckout/credit-card-front2.svg)]' : 'bg-[url(/assets/Images/ImageCheckout/credit-card-front-disable.svg)]';

    useEffect(() => {
        const number = onlyNumbers(creditCardNumber);
        const imgCreditCard = cartoes.find(item => item.Regex.test(number))?.Image;
        setFlagCreditCard(imgCreditCard);
    }, [creditCardNumber]);

    return (
        <div className={`flex items-end w-[223px] h-[145px] ${imageBgFront} bg-no-repeat bg-contain rounded-[10px]`}>
            <div className="flex flex-col w-full h-full px-2 py-5">
                {flagCreditCard && (
                    <div className='pb-7'>
                        <Image src={flagCreditCard} alt="Bandeira do Cartão" width={50} height={30} />
                    </div>
                )}

                {creditCardNumber && (
                    <>
                        <p className="text-plamev-yellow-50">{creditCardNumber}</p>
                        <div className="flex items-center justify-between w-full">
                            <p className="text-plamev-yellow-50 text-[12px] uppercase">{creditCardName}</p>
                            <p className="text-plamev-yellow-50 text-[12px]">{`${creditCardMonth}/${creditCardYear}`}</p>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
};

export default FrontCreditCard;