<template>
  <UTabs v-model="fitting" :content="false" :items="tabs" size="sm" />
</template>

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'
import type { PropType } from 'vue'
import { IPvzMapFittingTabs } from '#shared/types'
import { computed } from 'vue'

const fitting = defineModel('fitting', { type: Object as PropType<IPvzMapFittingTabs>, default: () => IPvzMapFittingTabs.ALL })

const tabs = computed<TabsItem[]>(() => [
  {
    value: IPvzMapFittingTabs.ALL,
    label: fitting.value === IPvzMapFittingTabs.ALL ? 'все' : '',
    icon: 'i-lucide-globe',
  },
  {
    value: IPvzMapFittingTabs.ALLOW,
    label: fitting.value === IPvzMapFittingTabs.ALLOW ? 'с примеркой' : '',
    icon: 'i-lucide-shirt',
  },
  {
    value: IPvzMapFittingTabs.FORBID,
    label: fitting.value === IPvzMapFittingTabs.FORBID ? 'без примерки' : '',
    icon: 'i-lucide-ban',
  },
])
</script>
