<template>
  <div>
    <div class="flex items-center space-x-7 bg-[#F8F8F8] py-16">
      <div
        v-for="tab in tabs"
        :key="tab.lable"
        @click="handleClick(tab)"
        class="flex w-78 h-34 text-14 cursor-pointer items-center justify-center rounded-full text-base transition-all"
        :class="[
          currentTab == tab.name ? 'bg-primary text-white font-bold' : 'bg-yellow text-black-3'
        ]"
      >
        {{ tab.lable }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: () => []
  }
})

const currentTab = useRouteQuery('tab')

function handleClick(tab) {
  navigateTo({
    query: {
      tab: tab.name
    }
  })
}
</script>

<style lang="scss" scoped></style>
