<script setup lang="ts">
interface Props {
  modelValue?: boolean;
  disabled?: boolean;
  onToggle?: () => void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  disabled: false,
  onToggle: () => {
    // do nothing
  },
});

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

<template>
  <div
    :class="{
      'opacity-50': disabled,
      'cursor-not-allowed': disabled,
    }"
    class="w-8 h-8 cursor-pointer"
    @click="$emit('update:modelValue', !modelValue)"
  >
    <button
      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 cy-checkbox cy-checkbox-checked"
      @click.stop="props.onToggle()"
    ></button>
    <button
      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')] cy-checkbox cy-checkbox-unchecked"
      @click.stop="props.onToggle()"
    ></button>
  </div>
</template>
