import { motion } from 'framer-motion';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import {
    FilterMotionDuration,
    FilterMotionStyle,
    FilterMotionVariants
} from '@/entities/common/model/constant';

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

export const LinkPaymentApplyFailPage = ({
    pageOn,
    setPageOn,
    resultMessage,
    errorMessage,
    onClose
}: LinkPaymentApplyFailPageProps) => {

    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={{ justifyContent: 'center', alignItems: 'center' }}>
                    <div className="success-page">
                        <div className="success-body">
                            <div
                                className="error-icon"
                                aria-hidden="true"
                            ></div>
                            <h1 className="success-title">
                                <span>링크결제_분리승인</span>
                            </h1>

                            {resultMessage && (
                                <p className="result-text" style={{ textAlign: 'center', marginBottom: '20px' }}>
                                    {resultMessage}
                                </p>
                            )}

                            <div className="success-result">
                                <p className="result-text align-left position_label">
                                    <span>결과 :</span>
                                    <span>{errorMessage || '다시 시도해 주세요'}</span>
                                </p>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToClose}
                            >확인</button>
                        </div>
                    </div>
                </div>
            </motion.div>
        </>
    );
};
