import { IMAGE_ROOT } from '@/shared/constants/common';


export const AllTransactionPartCancel = () => {
  

  return (
    <>
      <div className="tb_both">
        <table className="partial-cancel-table">
          <colgroup>
            <col width="30%" />
            <col width="30%" />
            <col width="40%" />
          </colgroup>
          <thead>
            <tr>
              <th className="header-empty"></th>
              <th className="header-balance">잔액</th>
              <th className="header-cancel">취소금액</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="row-label">과세액</td>
              <td className="row-balance">555,550,000</td>
              <td className="row-cancel">
                <input 
                  className="cancel-input"
                  type="text"
                  value=""
                />
              </td>
            </tr>
              <tr>
                <td className="row-label">부가세</td>
                <td className="row-balance">50,000</td>
                <td className="row-cancel">
                  <input 
                    className="cancel-input"
                    type="text"
                    placeholder=""
                  />
                </td>
              </tr>
              <tr>
                <td className="row-label">면세</td>
                <td className="row-balance">50,000</td>
                <td className="row-cancel">
                  <input 
                    className="cancel-input"
                    type="text"
                    placeholder=""
                  />
                </td>
              </tr>
              <tr>
                <td className="row-label">봉사료</td>
                <td className="row-balance">50,000</td>
                <td className="row-cancel">
                  <input 
                    className="cancel-input"
                    type="text"
                    placeholder=""
                  />
                </td>
              </tr>
          </tbody>
        </table>
      </div>

      <div className="form-section">
        <div className="form-group">
          <label className="form-label">취소 비밀번호</label>
          <div className="input-wrapper wid-100 error">
            <input 
              className="wid-100 align-right"
              type="password"
              value=""
            />
          </div>
        </div>
        <div className="error-msg">비밀번호 불일치</div>

        <div className="form-group">
          <label className="form-label">은행</label>
          <div className="input-wrapper wid-100">
            <select className="wid-100 align-right">
              <option>선택</option>
              <option>KB국민은행</option>
              <option>22323213123</option>
            </select>
          </div>
        </div>
    
        <div className="form-group">
          <label className="form-label">계좌번호</label>
          <div className="input-wrapper wid-100">
            <input 
              className="form-input wid-100"
              type="text"
              placeholder=""
            />
          </div>
        </div>

        <div className="form-group">
          <label className="form-label">예금주</label>
          <div className="input-wrapper wid-100">
            <input
              className="form-input  wid-100"
              type="text"
              placeholder=""
            />
          </div>
        </div>

        <div className="notice-text wid-100">
          <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
        </div>
      </div>  
    </>
  );
};
