import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
    FilterMotionDuration,
    FilterMotionStyle,
    FilterMotionVariants
} from '@/entities/common/model/constant';

export interface LinkPaymentApplySuccessPageProps {
    pageOn: boolean;
    setPageOn: (pageOn: boolean) => void;
    resultMessage?: string;
    successCount?: number;
    failCount?: number;
    totalCount?: number;
    onClose?: () => void;
}

export const LinkPaymentApplySuccessPage = ({
    pageOn,
    setPageOn,
    resultMessage,
    successCount,
    failCount,
    totalCount,
    onClose
}: LinkPaymentApplySuccessPageProps) => {
    const { t } = useTranslation();

    const onClickToClose = () => {
        setPageOn(false);
        if (onClose) {
            onClose();
        }
    };

    return (
        <>
            <motion.div
                className="full-menu-modal"
                initial="hidden"
                animate={(pageOn) ? 'visible' : 'hidden'}
                variants={FilterMotionVariants}
                transition={FilterMotionDuration}
                style={{ ...FilterMotionStyle, overflow: 'hidden' }}
            >
                <div className="full-menu-container" style={{ paddingTop: '0px' }}>
                    <div className="success-page">
                        <div className="success-body">
                            <div
                                className="success-icon"
                                aria-hidden="true"
                            ></div>
                            <h1 className="success-title">
                                <span>{t('additionalService.linkPayment.separateApproval')}</span>
                            </h1>

                            <div className="success-result">
                                <p className="result-text align-left position_label">
                                    <span>{t('common.result')} :</span>
                                    <span>{resultMessage || t('additionalService.linkPayment.allRequestSuccess')}</span>
                                </p>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToClose}
                            >{t('common.confirm')}</button>
                        </div>
                    </div>
                </div>
            </motion.div>
        </>
    );
};