<template>
  <view class="tab-bar">
    <view
      v-for="tab in tabs"
      :key="tab.id"
      class="tab-bar__item"
      :class="{ 'tab-bar__item--active': modelValue === tab.id }"
      @click="$emit('update:modelValue', tab.id)"
    >
      <text v-if="tab.icon" class="tab-bar__icon">{{ tab.icon }}</text>
      <text class="tab-bar__label">{{ tab.label }}</text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  tabs: { type: Array, default: () => [] },
  modelValue: { type: String, default: '' }
})

defineEmits(['update:modelValue'])
</script>

<style lang="scss" scoped>
.tab-bar {
  display: flex;
  height: 100rpx;
  background-color: $bg-secondary;
  border-top: 1rpx solid $border-color;

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    color: $text-secondary;
    transition: color 0.2s;

    &:active {
      background-color: $bg-tertiary;
    }

    &--active {
      color: $accent;
    }
  }

  &__icon {
    font-size: 32rpx;
  }

  &__label {
    font-size: 20rpx;
  }
}
</style>
