import { useState } from "react";
import Payment from "./payment";
import Detail from "./detail";

function Information({ typePay, setTypePay, setIsPay, isPay }) {

    const [isForAnother, setIsForAnother] = useState(false);
    const [fade, setFade] = useState(false);

    const fadeElement = (func) => {
        setFade(true);

        const timeout = setTimeout(() => {
            func()
            setFade(false);
        }, 1000);

        return () => clearTimeout(timeout);
    }

    return (
        <div
            className={`w-full lg:w-[59%] opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
            rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
            ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}`}
        >
            <div className={`transition-opacity !duration-300 ease-in ${fade ? '!opacity-0' : '!opacity-100'}`}>
                {isPay ?
                    <Payment
                        typePay={typePay}
                        setIsPay={setIsPay}
                        setTypePay={setTypePay}
                        fadeElement={fadeElement}
                    /> :
                    <Detail
                        setIsPay={setIsPay}
                        fadeElement={fadeElement}
                        isForAnother={isForAnother}
                        setIsForAnother={setIsForAnother}
                    />
                }
            </div>
        </div>
    )
}

export default Information