<template>
  <UiButton
    :class="[cn.b()]"
    type="ghost"
    color="secondary"
    :icon="icon"
    :state="checked ? 'active' : undefined"
    :size="size"
    @click="handleChange"
  >
    <template v-if="label">
      {{ label }}
    </template>
  </UiButton>
</template>

<script setup lang="ts">
import type { OptionProps } from './types.js'

const props = defineProps<OptionProps>()
const slots = useSlots()

const cn = useClassname('ui-switcher-option')

const { checked, handleChange } = useRadio(props, slots)
</script>
