import './addPayment.scss';

import React from 'react';

import Button from '../../../components/Button/button';
import ImageIcon from '../../../components/ImageIcon';
import i18n from '../../../i18n';

// const moneylist = [
//   '2,000',
//   '3,000',
//   '5,000',
//   '10,000',
//   '30,000',
//   '50,000',
//   '100,000',
// ];

const AddPayment: React.FC = () => {
  return (
    <div className="addPayment">
      <div className="addPayment-header">
        <ImageIcon className="addPayment-back-icon" src="iconHalfsheetBack" />
        <p className="addPayment-header-label">{i18n.t('addPayment.nobal')}</p>
      </div>

      <div className="addPayment-divider" />

      <div className="addPayment-app-section">
        <div className="app-line">
          <ImageIcon src="paypayfleamarket" className="avatar" />
          <div className="app-name">{i18n.t('addPayment.appname')}</div>
          <div className="balance">
            2,100<span>円</span>
          </div>
        </div>
        <div className="app-line">
          <div className="label">{i18n.t('addPayment.balance')}</div>
          <div className="money ">
            1,000<span>円</span>
          </div>
        </div>
        <div className="app-line">
          <div className="label">{i18n.t('addPayment.deficiency')}</div>
          <div className="money insufficient">
            1,100<span>円</span>
          </div>
        </div>
      </div>

      <div className="addPayment-divider-bold" />

      <div className="addPayment-charge">
        <div className="charge-title">{i18n.t('addPayment.charge')}</div>
        <div className="charge-select">{i18n.t('addPayment.selectcharge')}</div>
        <div className="charge-money">
          3,000<span className="unit">円</span>
        </div>
        <div className="charge-area">
          <div className="money-number margin-right">1,000</div>
          <div className="money-number margin">3,000</div>
          <div className="money-number margin">5,000</div>
          <div className="money-number margin">10,000</div>
          <div className="money-number money-more margin-left">...</div>
        </div>
      </div>

      <div className="addPayment-divider" />

      <div className="addPayment-money">
        <div className="addPayment-money-label-container">
          <span className="addPayment-money-label">
            {i18n.t('addPayment.chargemtd')}
          </span>
        </div>
        <div className="addPayment-money-balance-container">
          <div>
            <ImageIcon
              className="addPayment-money-balance-icon"
              src="ic-yj-card"
              type="svg"
            />
          </div>
          <div className="addPayment-money-detail">
            <div>
              <span className="addPayment-money-balance-label">
                {i18n.t('addPayment.cc')}
              </span>
            </div>
            <div>
              <span className="addPayment-money-balance-number">**** 999</span>
            </div>
            <div>
              <ImageIcon
                src="check-green"
                className="addPayment-money-card-auth"
              />
              <span className="addPayment-money-auth-name">
                {i18n.t('addPayment.authenticate')}
              </span>
            </div>
          </div>
          <div>
            <ImageIcon
              className="addPayment-money-next-icon"
              src="iconArrowsmallrightSingle"
            />
          </div>
        </div>
      </div>

      <div className="addPayment-btn-container">
        <Button className="btn-block" btnType="primary">
          {i18n.t('addPayment.chargenpay')}
        </Button>
      </div>

      {/* <div className="addPayment-money-list">
        <ul>
          {moneylist.map((money) => {
            return (
              <li>
                {money}
                <span>円</span>
              </li>
            );
          })}
        </ul>
      </div> */}
    </div>
  );
};

export default AddPayment;