<script setup lang="ts">
import type { TreeItem } from './type'
import { Check } from 'lucide-vue-next'
import CommandItem from './command-item.vue'

defineProps<{
  item: TreeItem
  selectedValue?: string
  shouldAlign?: boolean
}>()

const emit = defineEmits(['select'])

function handleSelect(value: string) {
  emit('select', value)
}
</script>

<template>
  <div class="leaf-node min-w-max">
    <CommandItem
      :value="item.value"
      class="flex items-center justify-between p-2 w-full text-sm font-normal hover:text-primary cursor-pointer rounded-md bg-white dark:bg-transparent"
      :class="{ 'pl-8': shouldAlign }"
      @select="() => handleSelect(item.value)"
    >
      <span class="text-sm font-normal text-gray-400 dark:text-gray-300">{{ item.label }}</span>
      <Check
        v-if="selectedValue === item.value"
        class="w-4 h-4 text-primary ml-2 flex-shrink-0"
      />
    </CommandItem>
  </div>
</template>

<style scoped>
.leaf-node {
  width: 100%;
}
</style>
