import { NumericFormat } from 'react-number-format';
import { SettlementStatus } from '../model/types';

export interface CalendarAmountRowProps {
  amount: number;
  settlementStatus: SettlementStatus;
};

export const CalendarAmountRow = ({
  amount,
  settlementStatus
}: CalendarAmountRowProps) => {

  const makeTitle = () => {
    let rs = [];
    if(settlementStatus === SettlementStatus.SCHEDULED){
      rs.push(
        <span 
          key='amount-label-scheduled'
          className="scheduled"
        >예정</span>
      );
    }
    else if(settlementStatus === SettlementStatus.COMPLETED){
      rs.push(
        <span 
          key='amount-label-complete'
          className="complete"
        >완료</span>
      );
    }
    return rs;
  };

  return (
    <>
      <div className="amount-row">
        <div className="amount-label">정산 { makeTitle() } 금액</div>
        <div className="amount-value">
          <NumericFormat
            value={ amount } 
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      </div>
    </>
  );
};