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

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

  useSetHeaderTitle('지급대행 상세');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.paymentAgency.list);
  });

  return (
    <>
      <main className="full-height">
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="pay-top">
              <div className="num-amount">
                <span className="amount">10,000,000원</span>
              </div>
              <div className="num-store">나이스테스트가맹점</div>
              <div className="num-day">2025.08.19</div>
              <div className="receipt-row">
                <button
                  className="receipt-btn"
                  type="button" 
                >
                  <span className="icon-24 download"></span>
                  <span>입출금 확인증</span>
                </button>
              </div>
            </div>
            <div className="detail-divider"></div>
            <div className="pay-detail">
              <div className="detail-title">상세 정보</div>
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">지급상태</span>
                  <span className="v">요청</span>
                </li>
                <li className="kv-row">
                  <span className="k">거래유형</span>
                  <span className="v">최초요청</span>
                </li>
                <li className="kv-row">
                  <span className="k">요청일</span>
                  <span className="v">2025.06.05</span>
                </li>
                <li className="kv-row">
                  <span className="k">지급일시</span>
                  <span className="v">2025.06.08 11:00:00</span>
                </li>
                <li className="kv-row">
                  <span className="k">사업자번호</span>
                  <span className="v">'123456789'</span>
                </li>
                <li className="kv-row">
                  <span className="k">예금주</span>
                  <span className="v">김테스트</span>
                </li>
                <li className="kv-row">
                  <span className="k">은행</span>
                  <span className="v">기업은행</span>
                </li>
                <li className="kv-row">
                  <span className="k">계좌번호</span>
                  <span className="v">'1123456789'</span>
                </li>
                <li className="kv-row">
                  <span className="k">입금인자</span>
                  <span className="v">나이스정산금</span>
                </li>
                <li className="kv-row">
                  <span className="k">실패사유</span>
                  <span className="v">&nbsp;</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};