<template>
  <ElDescriptions :column="2" border>
    <ElDescriptionsItem :label="t('merchant.fields.licenseNumber')">
      {{ merchant?.licenseNumber || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.legalRepresentative')">
      {{ merchant?.legalRepresentative || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.registeredAddress')">
      {{ merchant?.registeredAddress || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.contactPhone')">
      {{ merchant?.contactPhone || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.contactEmail')">
      {{ merchant?.contactEmail || '-' }}
    </ElDescriptionsItem>
  </ElDescriptions>
</template>

<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
  import { useI18n } from 'vue-i18n'

  interface Props {
    merchant?: Api.Merchant.MerchantDetail | null
  }

  defineProps<Props>()
  const { t } = useI18n()
</script>
