import { PATHS } from '@/shared/constants/paths';
import { useState } from 'react';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
import { LinkPaymentShippingHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap';
import {
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode,
    useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

/**
 * 발송내역 탭 화면
 */

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

    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)

    useSetHeaderTitle('링크결제')
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.home);
    });

    return (
        <>
            <main>
                <div className="tab-content">
                    <div className="tab-pane pt-46 active">
                        <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
                        <LinkPaymentShippingHistoryWrap></LinkPaymentShippingHistoryWrap>
                    </div>
                </div>
            </main>
        </>
    )
}