<template>
  <li
    :class="[cn.b(), cn.is('active', active)]"
    tabindex="0"
    @click="onClick"
  >
    <div
      v-if="$slots.icon"
      :class="[cn.e('icon')]"
    >
      <slot name="icon" />
    </div>

    <slot />
  </li>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import useClassname from '../../composables/use-classname'
import { dropdownContextKey } from './constants'

export interface Props {
  active?: boolean
}

defineOptions({
  name: 'UiSpinner',
})

const props = withDefaults(defineProps<Props>(), {
  active: false,
})

const dropdown = inject(dropdownContextKey)

const cn = useClassname('ui-dropdown-item')

function onClick() {
  dropdown.handleItemClick()
}
</script>
