<script setup lang="ts">
import ListProsedur from './sep-prosedur/list.vue'

const tabs = [
  { value: 'sep-prosedur', label: 'Sep Prosedur', component: ListProsedur },
  { value: 'konsultasi', label: 'Konsultasi' },
  { value: 'surat', label: 'Surat Kontrol' },
  { value: 'catatan', label: 'Catatan Perkembangan Pasien' },
  { value: 'medis', label: 'Pengkajian Awal Medis & Asesmen Fungsi' },
  { value: 'keperawatan', label: 'Pengkajian Awal Keperawatan' },
  { value: 'protokol', label: 'Protokol Terapi' },
  { value: 'tindakan', label: 'Tindakan' },
  { value: 'obat', label: 'Order Obat' },
  { value: 'bmhp', label: 'Order BMHP & Alkes' },
  { value: 'radiologi', label: 'Pemeriksaan Radiologi' },
  { value: 'labpk', label: 'Pemeriksaan Lab PK' },
  { value: 'labmikro', label: 'Order Lab Mikro' },
  { value: 'labpa', label: 'Order Lab PA' },
  { value: 'ambulance', label: 'Ambulance' },
  { value: 'resume', label: 'Resume' },
]
</script>

<template>
  <Tabs default-value="sep-prosedur" class="w-full">
    <div class="scrollbar-hide overflow-x-auto">
      <TabsList class="inline-flex gap-2 whitespace-nowrap bg-transparent p-2">
        <TabsTrigger
          v-for="tab in tabs"
          :key="tab.value"
          :value="tab.value"
          class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
        >
          {{ tab.label }}
        </TabsTrigger>
      </TabsList>
    </div>

    <div class="mt-4">
      <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
        <div class="rounded-md border p-4">
          <component :is="tab.component" v-bind="tab.props || {}" :label="tab.label" />
        </div>
      </TabsContent>
    </div>
  </Tabs>
</template>

<style>
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
