<script setup lang="ts">
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import { cn, } from '~/lib/utils'
import type { ControlLetter } from '~/models/control-letter'

// #region Props & Emits
const props = defineProps<{
  instance: ControlLetter | null
}>()

const emit = defineEmits<{
  (e: 'click', type: string): void
}>()

// #endregion

// #region State & Computed
// #endregion

// Computed addresses from nested data
// #endregion

// #region Lifecycle Hooks
// #endregion

// #region Functions

// #endregion region

// #region Utilities & event handlers
function onClick(type: string) {
  emit('click', type)
}
// #endregion

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

<template>
  <div :class="cn('min-h-[50vh] space-y-2',)">
    <DetailRow label="Tgl Rencana Kontrol">{{ props.instance?.date ? new Date(props.instance?.date).toLocaleDateString('id-ID') : '-' }}</DetailRow>
    <DetailRow label="Unit">{{ props.instance?.unit.name || '-' }}</DetailRow>
    <DetailRow label="Spesialis">{{ props.instance?.specialist.name || '-' }}</DetailRow>
    <DetailRow label="Sub Spesialis">{{ props.instance?.subspecialist.name || '-' }}</DetailRow>
    <DetailRow label="DPJP">{{ props.instance?.doctor.employee.person.name || '-' }}</DetailRow>
    <DetailRow label="Status SEP">{{ 'SEP INTERNAL' }}</DetailRow>
  </div>
  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
    <PubMyUiNavFooterBaEd @click="onClick" />
  </div>
</template>

<style scoped></style>
