<script setup>
const activeFilter = defineModel({ type: String, default: 'OPEN' })

const tabs = [
  { label: 'Open', value: 'OPEN', badgeVariant: 'critical' },
  { label: 'Acknowledged', value: 'ACKNOWLEDGED', badgeVariant: 'warning' },
  { label: 'Resolved', value: 'RESOLVED', badgeVariant: 'success' },
  { label: 'Escalated', value: 'ESCALATED', badgeVariant: 'info' },
]
</script>

<template>
  <div class="-mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0">
    <div class="flex min-w-max gap-2 border-b border-gray-200 dark:border-gray-700 sm:min-w-0 sm:flex-wrap">
      <button
        v-for="tab in tabs"
        :key="tab.value"
        type="button"
        class="shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        :class="activeFilter === tab.value
          ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
          : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
        @click="activeFilter = tab.value"
      >
        {{ tab.label }}
      </button>
    </div>
  </div>
</template>
