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

export interface BusinessSectionProps {
  data?: MerchantMidResponse
};

export const BusinessSection = ({
  data
}: BusinessSectionProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="section">
        <div className="section-title">{t('merchant.basicInfo')}</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{t('merchant.companyName')}</span>
            <span className="v">{ data?.businessCompanyName }</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.businessAttribute')}</span>
            <span className="v">{ data?.businessScaleTypeName }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.businessType')}</span>
            <span className="v">{ data?.businessType }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.businessCategory')}</span>
            <span className="v">{ data?.businessCategory }</span>
          </li>
        </ul>
      </div>
      <div className="info-divider mb-16"></div>
      <div className="section">
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{t('merchant.representativeName')}</span>
            <span className="v">{ data?.representativeName }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.representativePhone')}</span>
            <span className="v">{ data?.telephoneNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.representativeEmail')}</span>
            <span className="v">{ data?.email }</span>
          </li>
        </ul>
      </div>
      <div className="info-divider mb-16"></div>
      <div className="section">
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{t('merchant.businessAddress')}</span>
            <span className="v">{ data?.businessAddress }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.websiteUrl')}</span>
            <span className="v">{ data?.url }</span>
          </li>
        </ul>
      </div>
    </>
  );
};