import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { OnlineInfomation } from '../../model/types';

export interface OnlineSectionProps {
  data?: OnlineInfomation
};

export const OnlineSection = ({
  data
}: OnlineSectionProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="section">
        <div className="section-title">{t('merchant.onlineRegistrationStatus')}</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{t('merchant.status')}</span>
            <span className="v">{ data?.usageStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.companyName')}</span>
            <span className="v">{ data?.companyName }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.businessRegistrationNumber')}</span>
            <span className="v">{ data?.businessRegistrationNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.issueDate')}</span>
            <span className="v">{ data?.registrationDate }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.contractStatus')}</span>
            <span className="v">{ data?.contractStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.websiteReviewStatus')}</span>
            <span className="v">{ data?.cardAuditStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.guaranteeInsurance')}</span>
            <span className="v">{ data?.insuranceAmount }</span>
          </li>
          <li className="kv-row">
            <span className="k">{ (data?.insuranceExpiryDate)? `(${moment(data?.insuranceExpiryDate).format('YYYY.MM.DD')})`: '' }</span>
            <span className="v"></span>
          </li>
        </ul>
      </div>
    </>
  );
};