import { motion } from 'framer-motion';
import { NumericFormat } from 'react-number-format';
import { DetailInfoKeys, DetailInfoProps } from '@/entities/settlement/model/types';

export const DetailAmountInfo = ({
  amountInfo,
  show,
  tid,
  onClickToShowInfo
}: DetailInfoProps) => {

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(DetailInfoKeys.Amount);
    }
  };

  return (
    <>
      <div className="txn-section">
        <div className="section-title">금액 정보</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">거래금액 합계</span>
            <span className="v">6,017,600 (269건)</span>
            <ul className="txn-amount-detail">
              <li>
                <span>·&nbsp;&nbsp;신용카드</span>
                <span>6,017,000 (260건)</span>
              </li>
              <li>
                <span>·&nbsp;&nbsp;계좌이체</span>
                <span>600 (9건)</span>
              </li>
            </ul>
          </li>
          <li className="kv-row">
            <span className="k">PG 수수료 합계</span>
            <span className="v">205,255</span>
            <ul className="txn-amount-detail">
              <li>
                <span>·&nbsp;&nbsp;결제수수료</span>
                <span>165,384</span>
              </li>
              <li>
                <span>·&nbsp;&nbsp;에스크로 수수료</span>
                <span>0</span>
              </li>
              <li>
                <span>·&nbsp;&nbsp;인증 수수료</span>
                <span>21,300</span>
              </li>
              <li>
                <span>·&nbsp;&nbsp;VAT</span>
                <span>18,571</span>
              </li>
            </ul>
          </li>
          <li className="kv-row">
            <span className="k">보류</span>
            <span className="v">0</span>
          </li>
          <li className="kv-row">
            <span className="k">해제</span>
            <span className="v">0</span>
          </li>
          <li className="kv-row">
            <span className="k">상계</span>
            <span className="v">- 80,603</span>
          </li>
          <li className="kv-row bolder">
            <span className="k">정산금액</span>
            <span className="v">5,731,742</span>
          </li>
        </ul>
      </div>
    </>
  );
};