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

export interface SupplierSectionProps {
  detail: VatReturnDetailResponse
};

export const SupplierSection = ({
  detail
}: SupplierSectionProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="txn-section">
        <div className="section-title">{t('vatReturn.supplierInfo')}</div>
      </div>
      <ul className="kv-list">
        <li className="kv-row">
          <span className="k">{t('merchant.businessRegistrationNumber')}</span>
          <span className="v">{ detail.supplierBusinessRegistrationNumber }</span>
        </li>
        <li className="kv-row">
          <span className="k">{t('merchant.companyName')}</span>
          <span className="v">{ detail.supplierCompanyName }</span>
        </li>
        <li className="kv-row">
          <span className="k">{t('merchant.representativeName')}</span>
          <span className="v">{ detail.supplierCeoName }</span>
        </li>
      </ul>
    </>
  );
};