<template>
  <view class="w-fit bg-[#EBF9FF] p-4 rounded-full flex items-center">
    <view class="w-fit px-20 py-10 rounded-full text-28 leading-28" :class="{ 'is-active': modelValue === item.value }"
      v-for="item in options" @click="changeTab(item.value)">
      {{ item.label }}
    </view>
  </view>
</template>
<script lang="ts" setup>
import { PropType } from 'vue';

const modelValue = defineModel('modelValue', {
  type: String,
  default: '0'
});
const props = defineProps({
  options: {
    type: Array as PropType<{
      label: string;
      value: string;
    }[]>,
    default: () => ([])
  }
});

const changeTab = (value: string) => {
  modelValue.value = value;
}
</script>
<style lang="scss" scoped>
.is-active {
  @apply text-white bg-gradient-to-r from-[#91E0FE] to-[#16AFF5];
}
</style>