<template>
  <div class="checkbox">
    <input
      :id="id ? `checkbox + id` : 'checkbox'"
      class="checkbox__input"
      type="checkbox"
      :value="modelValue"
      @input="onInput"
      :checked="modelValue"
    >
    <span class="checkbox__block" @click="toggleCheckbox"></span>
    <label :for="id ? `checkbox + id` : 'checkbox'" class="checkbox__label">
      <slot />
    </label>
  </div>
</template>

<script setup>
const $emit = defineEmits()
const props = defineProps({
  id: [Number, String],
  modelValue: Boolean
})

const onInput = (event) => {
  $emit('update:modelValue', event.target.checked);
};

const toggleCheckbox = () => {
  $emit('update:modelValue', !props.modelValue);
};
</script>

<style lang="scss" scoped>
.checkbox {
  display: flex;
  align-items: center;
  gap: 5px;

  &__input {
    display: none;
    opacity: 0;
  }

  &__block {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid $black;
    border-radius: $default_border_radius;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      background-color: $accent;
      border-radius: 2px;
      opacity: 0;
    }
  }

  &__label {
    cursor: pointer;
    color: #2B2B2B;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
}

.checkbox__input:checked + .checkbox__block::after {
  opacity: 1;
}
</style>