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

export interface AccountSectionProps {
  data?: MerchantMidResponse
};

export const AccountSection = ({
  data
}: AccountSectionProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="section">
        <div className="section-title">{t('merchant.settlementAccount')}</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">{t('merchant.bank')}</span>
            <span className="v">{ data?.bankName }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.accountNumber')}</span>
            <span className="v">{ data?.accountNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">{t('merchant.accountHolder')}</span>
            <span className="v">{ data?.accountHolderName }</span>
          </li>
        </ul>
      </div>
    </>
  );
};