<script setup lang="ts">
import { computed } from 'vue'

export interface TabOption {
  label: string
  value: string | number
}

const props = defineProps<{
  options: TabOption[]
  modelValue: string | number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
  (e: 'change', value: string | number): void
}>()

const activeValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
    emit('change', val)
  }
})

function handleClick(value: string | number) {
  activeValue.value = value
}
</script>

<template>
  <div class="tab-filter">
    <div class="tab-filter-left">
      <div v-for="option in options" :key="option.value" class="tab-item"
        :class="{ active: activeValue === option.value }" @click="handleClick(option.value)">
        {{ option.label }}
      </div>
    </div>
    <div class="tab-filter-right">
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-filter {
  display: flex;
  align-items: center;
  padding: 10px;
  background: var(--admin-card-bg);
  border-radius: 8px;
}

.tab-filter-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-filter-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-item {
  position: relative;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--admin-text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  user-select: none;

  &:hover {
    color: var(--admin-text-primary);
  }

  &.active {
    color: var(--el-color-primary);
    background: rgba(128, 119, 255, 0.1);

    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 2px;
      background: var(--el-color-primary);
      border-radius: 1px;
    }
  }
}
</style>
