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

export interface ReceiverSectionProps {
  detail: VatReturnDetailResponse
};

export const ReceiverSection = ({
  detail
}: ReceiverSectionProps) => {
  const { t } = useTranslation();

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