<template>
  <div class="vm-tabs">
    <button
      v-for="item in items"
      :key="String(item.value)"
      type="button"
      class="vm-tabs__item"
      :class="{ 'is-active': isActive(item.value) }"
      :disabled="disabled || item.disabled"
      @click="onSelect(item)"
    >
      {{ item.label }}
    </button>
  </div>
</template>

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

export type VmTabItem = {
  label: string
  value: string | number
  disabled?: boolean
}

const props = withDefaults(
  defineProps<{
    modelValue?: string | number
    items?: VmTabItem[]
    disabled?: boolean
  }>(),
  {
    modelValue: '',
    items: () => [],
    disabled: false,
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string | number]
  change: [value: string | number]
}>()

function isActive(value: string | number) {
  return String(props.modelValue) === String(value)
}

function onSelect(item: VmTabItem) {
  if (props.disabled || item.disabled) return
  if (isActive(item.value)) return
  emit('update:modelValue', item.value)
  emit('change', item.value)
}
</script>

<style lang="scss" scoped>
.vm-tabs {
  display: inline-flex;
  height: 36px;
  align-items: center;
  padding: 3px;
  border-radius: 12px;
  background: var(--muted);
}

.vm-tabs__item {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  &.is-active {
    background: #fff;
    color: var(--foreground);
    font-weight: 600;
    box-shadow: var(--shadow-card);

    .dark & {
      background: var(--card);
    }
  }
}
</style>
