import { IMAGE_ROOT } from "@/shared/constants/common";
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 PaymentAgencyRequestPage = () => {
  const { navigate } = useNavigate();

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

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="ing-list">
              <div className="billing-form gap-30">
                <div className="billing-row">
                  <div className="billing-label">서브ID</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value="BIKYvattest01m" 
                      readOnly={ true }
                    />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">지급액</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value="테스트상품123" 
                      readOnly={ true }
                     />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">지급일</div>
                  <div className="billing-field">
                    <div className="input-wrapper date">
                      <input 
                        className="date-input"
                        type="text" 
                        placeholder="날짜 선택" 
                        value="2025.06.08" 
                      />
                      <button 
                        className="date-btn"
                        type="button"
                      >
                        <img
                          src={ IMAGE_ROOT + '/ico_date.svg' }
                          alt="날짜 선택"
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};