<script setup lang="ts">
import type { Subspecialist } from '~/models/subspecialist'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'

// #region Props & Emits
defineProps<{
  subspecialist: Subspecialist
}>()

// #endregion

// #region State & Computed

// #region Lifecycle Hooks
// #endregion

// #region Functions

// #endregion region

// #region Utilities & event handlers

// #endregion

// #region Watchers
// #endregion
</script>

<template>
  <DetailRow label="Kode">{{ subspecialist.code || '-' }}</DetailRow>
  <DetailRow label="Nama">{{ subspecialist.name || '-' }}</DetailRow>
  <DetailRow label="Spesialis">
    {{ [subspecialist.specialist?.code, subspecialist.specialist?.name].filter(Boolean).join(' / ') || '-' }}
  </DetailRow>
  <DetailRow label="Unit">
    {{
      [subspecialist.specialist?.unit?.code, subspecialist.specialist?.unit?.name].filter(Boolean).join(' / ') || '-'
    }}
  </DetailRow>
  <DetailRow label="Instalasi">
    {{
      [subspecialist.specialist?.unit?.installation?.code, subspecialist.specialist?.unit?.installation?.name]
        .filter(Boolean)
        .join(' / ') || '-'
    }}
  </DetailRow>
</template>

<style scoped></style>
