import { useTranslation } from 'react-i18next';
import { HeaderType } from '@/entities/common/model/types';
import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";

export const LinkPaymentApplySuccessPage = () => {
    const { t } = useTranslation();
    const { navigate } = useNavigate();

    useSetHeaderTitle(t('additionalService.linkPayment.applyTitle'));
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);

    const onClickToHome = () => {
        navigate(PATHS.additionalService.linkPayment.shippingHistory);
    };

    return (
        <>
            <div className="success-page">
                <div className="success-body">
                    <div className="success-icon" aria-hidden="true"></div>
                    <h1 className="success-title">
                        <span>{t('additionalService.linkPayment.title')}</span><br/>
                        <span>{t('additionalService.linkPayment.paymentRequestComplete')}</span>
                    </h1>
                </div>
                <div className="apply-row">
                    <button
                        className="btn-50 btn-blue flex-1"
                        onClick={() => onClickToHome()}
                    >{t('common.confirm')}</button>
                </div>
            </div>
        </>
    );
};