import { DetailInfoSectionProps } from '../model/types';
import { InvoiceArrow } from './invoice-arrow';

export const DetailAmountInfoSection = ({
  amountInfo,
  show,
  onClickToShowInfo
}: DetailInfoSectionProps) => {

  return (
    <>
      <div className="txn-num-group">
        <div className="txn-amount">
          <div className="value">48,125,100<span className="unit">원</span></div>
          <button 
            className="chip-btn" 
            type="button"
          >
            <span>금액상세</span> <InvoiceArrow show={ show }></InvoiceArrow>
          </button>
        </div>
        <div className="amount-expand">
          <ul className="amount-list">
            <li className="amount-item">
              <span className="label">·&nbsp;&nbsp;공급가액</span>
              <span className="value">43,750,000 원</span>
            </li>
            <li className="amount-item">
              <span className="label">·&nbsp;&nbsp;VAT</span>
              <span className="value">4,375,100 원</span>
            </li>
          </ul>
        </div>
        <div className="txn-mid">
          <span className="value">croquis01m</span>
        </div>
        <div className="txn-mid">
          <span className="value">2025.08.19</span>
        </div>
        <div className="txn-doc">
          <button className="doc-btn" type="button">세금계산서</button>
          <button className="doc-btn" type="button">상세자료</button>
        </div>
      </div>
    </>
  );
};