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 { IMAGE_ROOT } from "@/shared/constants/common";
import { PATHS } from '@/shared/constants/paths';

export const LinkPaymentApplyConfirmPage = () => {
    const { navigate } = useNavigate();

    useSetHeaderTitle('메시지 미리보기');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);

    const onClickToConfirm = () => {
        navigate(PATHS.additionalService.linkPayment.confirmSuccess);
    };

    const onClickToBack = () => {
        navigate(-1);
    };

    return (
        <>
            <main className="pop">
                <div className="sub-wrap">
                    <div className="preview-body">
                        <div className="attention-icon" aria-hidden="true">
                            <img src={IMAGE_ROOT + '/ico_alert.svg'} alt="주의" />
                        </div>
                        <h1 className="preview-title">발송 메시지를<br/>최종 확인하세요</h1>
                        <div className="preview-result">
                            <p className="preview-text">
                                TEST  고객님, 안녕하세요?<br/>
                                나이스페이먼츠 주식회사에서 <br/>
                                결제하실 내역 안내드립니다.<br/>
                                아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.<br/><br/>
                                !$&#123;pay_url&#125;<br/><br/>
                                <b>
                                    가맹점 상호 : 나이스페이먼츠 주식회사<br/>
                                    상품명 : TEST<br/>
                                    금액 : 123,123원
                                </b>
                            </p>
                        </div>
                    </div>
                </div>

                <div className="apply-row two-button">
                    <button
                        className="btn-50 btn-darkgray flex-1"
                        onClick={() => onClickToBack()}
                    >이전</button>
                    <button
                        className="btn-50 btn-blue flex-3"
                        onClick={() => onClickToConfirm()}
                    >결제 신청</button>
                </div>
                <div className="home-indicator"></div>
            </main>
        </>
    );
};