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 LinkPaymentApplySuccessPageProps {
    pageOn: boolean;
    setPageOn: (pageOn: boolean) => void;
    resultMessage?: string;
}

export const LinkPaymentApplySuccessPage = ({
    pageOn,
    setPageOn,
    resultMessage
}: LinkPaymentApplySuccessPageProps) => {
    const { navigate } = useNavigate();

    const onClickToClose = () => {
        setPageOn(false);
        navigate(PATHS.additionalService.linkPayment.shippingHistory);
    };

    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>링크결제_분리승인</span>
                            </h1>
                            <div className="success-result">
                                <p className="result-text align-left position_label">
                                    <span>결과 :</span>
                                    <span>{resultMessage || '성공적으로 처리되었습니다'}</span>
                                </p>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToClose}
                            >확인</button>
                        </div>
                    </div>
                </div>
            </motion.div>
        </>
    );
};