<script setup lang="ts">
// Components
import { Button } from '~/components/pub/ui/button'

const route = useRoute()
const router = useRouter()

// Track active menu item from query param
const activeMenu = computed(() => route.query.menu as string || '')

interface ButtonItems {
  label: string
  icon: string
  value: string
  type: 'icon' | 'image'
}

const itemsOne: ButtonItems[] = [
  {
    label: 'Data Pendaftaran',
    icon: 'i-lucide-file',
    value: 'register',
    type: 'icon',
  },
  {
    label: 'Status Pembayaran',
    icon: 'i-lucide-banknote-arrow-down',
    value: 'status',
    type: 'icon',
  },
  {
    label: 'Riwayat Pasien',
    icon: 'i-lucide-history',
    value: 'history',
    type: 'icon',
  },
  {
    label: 'Penunjang',
    icon: 'i-lucide-library-big',
    value: 'support',
    type: 'icon',
  },
  {
    label: 'Resep',
    icon: 'i-lucide-pill',
    value: 'receipt',
    type: 'icon',
  },
  {
    label: 'DPJP',
    icon: 'i-lucide-stethoscope',
    value: 'doctor',
    type: 'icon',
  },
  {
    label: 'I-Care BPJS',
    icon: '/bpjs.png',
    value: 'bpjs',
    type: 'image',
  },
  {
    label: 'File SEP',
    icon: 'i-lucide-file',
    value: 'sep',
    type: 'icon',
  },
]

const itemsTwo: ButtonItems[] = [
  {
    label: 'Tarif Tindakan',
    icon: 'i-lucide-banknote-arrow-down',
    value: 'price-list',
    type: 'icon',
  },
  {
    label: 'Tarif Tindakan Paket',
    icon: 'i-lucide-banknote-arrow-down',
    value: 'price-list-package',
    type: 'icon',
  },
]

function handleClick(value: string) {
  router.replace({ path: route.path, query: { menu: value } })
}
</script>

<template>
  <div class="my-4">
  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">History Pasien:</h2>
  <div class="flex flex-wrap gap-2 mb-2">
    <Button
      v-for="item in itemsOne"
      :key="item.value"
      :class="[
        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
        activeMenu === item.value
          ? 'border-orange-300 bg-orange-400 text-white'
          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
      ]"
      @click="handleClick(item.value)"
    >
      <Icon v-if="item.type === 'icon'"
        :name="item.icon"
        class="h-4 w-4"
      />
      <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
      {{ item.label }}
    </Button>
  </div>
  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Billing Pasien:</h2>
  <div class="flex flex-wrap gap-2 mb-2">
    <Button
      v-for="item in itemsTwo"
      :key="item.value"
      :class="[
        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
        activeMenu === item.value
          ? 'border-orange-300 bg-orange-400 text-white'
          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
      ]"
      @click="handleClick(item.value)"
    >
      <Icon
        :name="item.icon"
        class="h-4 w-4"
      />
      {{ item.label }}
    </Button>
  </div>
  </div>
</template>
