import moment from 'moment';
import { OnlineInfomation } from '../../model/types';

export interface OnlineSectionProps {
  data?: OnlineInfomation
};

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

  return (
    <>
      <div className="section">
        <div className="section-title">온라인 등록현황</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">상태</span>
            <span className="v">{ data?.usageStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">상호</span>
            <span className="v">{ data?.companyName }</span>
          </li>
          <li className="kv-row">
            <span className="k">사업자 번호</span>
            <span className="v">{ data?.businessRegistrationNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">발급일자</span>
            <span className="v">{ data?.registrationDate }</span>
          </li>
          <li className="kv-row">
            <span className="k">계약완료 여부</span>
            <span className="v">{ data?.contractStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">홈페이지 심사 여부</span>
            <span className="v">{ data?.cardAuditStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">보증보험</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>
    </>
  );
};