'use client';

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

function Information() {

    const [isForAnother, setIsForAnother] = useState(false)
    const [typePay, setTypePay] = useState('success');
    const [isPay, setIsPay] = useState(true);
    const [fade, setFade] = useState(false);

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

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

        return () => clearTimeout(timeout);
    }

    return (
        <div
            className={`w-[59%] opacity-page p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]
            `}
        >
            <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