<template>
  <div :class="['tab-container', { 'auto-size': autoSize }]">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-item"
      :tabindex="1"
      :class="{ 'active': activeIndex === index }"
      @click="handleTabClick(index)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits, type PropType } from 'vue';

const props = defineProps({
  modelValue: {
    type: Number,
    required: true
  },
  tabs: {
    type: Array as PropType<{ label: string }[]>,
    required: true,
    validator: (value) => {
      return (value as any[]).every(item => item.label);
    }
  },
  autoSize: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:modelValue']);
const activeIndex = ref(props.modelValue);

watch(
  () => props.modelValue,
  (newVal) => {
    activeIndex.value = newVal;
  }
);

function handleTabClick(index: number) {
  activeIndex.value = index;
  emits('update:modelValue', index);
};
</script>

<style scoped lang="scss">
.tab-container {
  display: flex;
  width: 100%;
  gap: 8px;
  padding: 8px;

  &.auto-size {
    gap: 15px;
    width: auto;
    align-self: center;
    justify-content: center;

    .tab-item {
      white-space: nowrap;
    }

  }
}

.tab-item {
  flex: 1;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-text-primary);
  font-size: 0.8rem;
  font-weight: 500;

  &:focus {
    outline: 4px solid var(--color-primary);
  }

  &.active {
    background-color: var(--color-primary);
    color: var(--color-text-light);
  }
}
</style>