<script setup lang="ts">
defineProps<{
  tabs: Array<{ key: string; label: string; hasError?: boolean }>;
  modelValue: string;
}>();

defineEmits<{
  "update:modelValue": [value: string];
}>();
</script>

<template>
  <div class="-mb-px flex gap-6">
    <button
      v-for="tab in tabs"
      :key="tab.key"
      type="button"
      class="relative inline-flex items-center gap-1.5 pb-3 text-sm font-medium border-b-2 transition-colors"
      :class="
        modelValue === tab.key
          ? 'border-primary text-foreground'
          : 'border-transparent text-muted-foreground hover:text-foreground'
      "
      @click="$emit('update:modelValue', tab.key)"
    >
      {{ tab.label }}
      <span
        v-if="tab.hasError"
        class="inline-block h-1.5 w-1.5 rounded-full bg-destructive"
      />
    </button>
  </div>
</template>
