<script setup lang="ts">
// Types
import type { Encounter } from '~/models/encounter'

// Components
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'

const props = defineProps<{
  data: Encounter
}>()
</script>

<template>
  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
    <!-- Data Pasien -->
    <Accordion type="single" defaultValue="item-patient" collapsible>
      <AccordionItem value="item-patient" class="border-none">
        <AccordionTrigger class="focus:outline-none focus:ring-0">
          <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
        </AccordionTrigger>
        <AccordionContent>
          <EncounterQuickInfoFull :data="props.data" :is-grid="true" />
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>
