<script setup lang="ts">
interface Props {
  modelValue?: boolean,
  disabled?: boolean,
}

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

defineEmits(['update:modelValue'])
</script>

<template>
  <div
    class="cursor-pointer flex flex-row items-center"
    :class="{
      'opacity-50': disabled,
      'cursor-not-allowed': disabled,
    }"
    @click="$emit('update:modelValue', !modelValue)"
  >
    <div
      v-if="modelValue"
      class="
        w-8 h-8
        flex-none
        bg-contain
        bg-[url('/static/icons/icon-checkbox-checked.svg')]
        hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')]
        disabled:opacity-50
        "
    ></div>
    <div
      v-else
      class="
        w-8 h-8
        flex-none
        bg-contain
        bg-[url('/static/icons/icon-checkbox-unchecked.svg')]
        hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')]
      "
    ></div>
    <div class="flex-auto pl-4"><slot></slot></div>
  </div>

</template>
