<template>
  <div :class="[cn.b(), cn.m(color)]">
    <UiSwitcherOption
      v-for="(option, index) in options"
      :id="id"
      :key="index"
      :label="option.label"
      :value="option.value"
      :size="size"
    />
  </div>
</template>

<script setup lang="ts">
import UiSwitcherOption from './option.vue'
import type { ModelValue, Props } from './types'

defineOptions({
  name: 'UiSwitcher',
})

const props = withDefaults(defineProps<Props>(), {
  color: 'blue',
  required: false,
  size: 'medium',
})

defineEmits<{
  'update:modelValue': [state: ModelValue]
}>()

const cn = useClassname('ui-switcher')
</script>

<style lang="scss">
@use 'styles';
</style>
