<script setup lang="ts">
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import { type Variants, Badge } from '~/components/pub/ui/badge'
import { cn, } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
import type { VaccineData } from '~/models/vaccine-data';

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

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

const dummy = [
  {
    id: 1,
    number: 1,
    name: 'Operasi',
    code: 'OP-001'
  }
]

// #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() {
  emit('click')
}
// #endregion

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

<template>
  <article :class="cn('mb-5 space-y-1',)">
    <DetailRow label="Jenis Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Tanggal Pemberian Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Tanggal Kedaluwarsa Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Nomor Batch Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Dosis Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Dosis Ke">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Lokasi Injeksi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
    <DetailRow label="Tanggal Terlaksana">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
  </article>  

    <div class="border-t-1 py-2 flex justify-end border-t-slate-300">
      <PubMyUiNavFooterBa @click="onClick" />
    </div>
</template>

<style scoped></style>
