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 { LinkPaymentWaitSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-wait-send-wrap';
import {
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
	useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
import { useTranslation } from 'react-i18next';

/**
 * Pending send tab screen
 */
export const LinkPaymentWaitSendPage = () => {
	const { t } = useTranslation();
	const { navigate } = useNavigate();

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

	useSetHeaderTitle(t('additionalService.linkPayment.title'))
	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>
						<LinkPaymentWaitSendWrap></LinkPaymentWaitSendWrap>
					</div>
				</div>
			</main>
		</>
	);
}