<template>
  <div
    :class="[cn.b(), cn.is('selected', selected), cn.is('disabled', disabled)]"
    :tabindex="disabled ? -1 : 0"
    @click="$emit('click')"
    @keydown.space="$emit('click')"
    @keydown.enter="$emit('click')"
  >
    <slot>
      <!--      <UiCoin v-if="coin" :name="coin" :class="cn.e('coin')" circle /> -->

      <span :class="[cn.e('label')]">{{ label }}</span>

      <UiIconSCheck
        v-if="multiple"
        :class="cn.e('checkbox')"
      />
    </slot>
  </div>
</template>

<script setup lang="ts">
import useClassname from '../../composables/use-classname'

// import UiCoin from 'alfabit-ui/components/coin/coin.vue';

export interface Props {
  label: string
  disabled?: boolean
  selected?: boolean
  multiple?: boolean
  coin?: string
}

defineOptions({
  name: 'UiSelectOption',
})

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  selected: false,
  multiple: false,
})

defineEmits(['click'])

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