<template>
  <li class="nv-select__option"
      :class="{
                'nv-select__option--disabled':disabled,
                'nv-select__option--selected':selected
              }"
      v-bind:role="!disabled ? 'option' : undefined">
    <slot>
      <div class="flex items-center">
        <nv-icon v-if="multiple" :icon="icon" class="nv-select__option__icon"/>
        <span class="whitespace-normal leading-tight" v-text="label"/>
      </div>
    </slot>
  </li>
</template>

<script>
export default {
  name: "NvSelectItem",
  props: {
    disabled: Boolean,
    selected: Boolean,
    multiple: Boolean,
    icon: String,
    label: [String, Number],
  }
}
</script>
