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

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

    useSetHeaderTitle('계좌성명조회 상세');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.accountHolderSearch.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">10002464******</span>
                            </div>
                            <div className="num-store">기업은행</div>
                            <div className="num-day">2025.09.12 16:12:37</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">&nbsp;</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">조회 일시</span>
                                    <span className="v">2025.09.12 16:12:37</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">기업은행</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">계좌번호</span>
                                    <span className="v">1002464642587</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">요청구분</span>
                                    <span className="v">API</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}