<template>
  <div class="vm-page-tabs" :class="[`is-${variant}`]" role="tablist">
    <button
      v-for="tab in tabs"
      :key="tab.key"
      type="button"
      role="tab"
      class="vm-page-tabs__item"
      :class="{ 'is-active': modelValue === tab.key }"
      :aria-selected="modelValue === tab.key"
      @click="emit('update:modelValue', tab.key)"
    >
      {{ tab.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'vm-page-tabs' })

export type PageTab = { key: string; label: string }

withDefaults(
  defineProps<{
    modelValue: string
    tabs: PageTab[]
    variant?: 'pill' | 'segmented'
  }>(),
  {
    variant: 'pill',
  },
)

const emit = defineEmits<{
  'update:modelValue': [key: string]
}>()
</script>

<style lang="scss" scoped>
.vm-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  &.is-segmented {
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--foreground) 5%, var(--card));

    .vm-page-tabs__item {
      height: 32px;
      padding: 0 14px;
      border: none;
      border-radius: 8px;
      background: transparent;

      &.is-active {
        background: var(--card);
        color: var(--brand);
        box-shadow: var(--shadow-soft);
      }
    }
  }
}

.vm-page-tabs__item {
  height: 34px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;

  &:hover:not(.is-active) {
    border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
    background: var(--muted);
    color: var(--foreground);
  }

  &.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
  }
}
</style>
