<template>
  <button
    type="button"
    class="checkbox-field"
    :class="{
      'checkbox-field--selected': modelValue,
      'checkbox-field--disabled': disabled,
    }"
    :disabled="disabled"
    @click="onToggle"
  >
    <span class="checkbox-field__box" />
    <span v-if="label" class="checkbox-field__label">{{ label }}</span>
    <slot />
  </button>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  label: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue', 'change'])

const onToggle = () => {
  if (props.disabled) return
  const next = !props.modelValue
  emit('update:modelValue', next)
  emit('change', next)
}
</script>

<style lang="scss" scoped>
.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-fa);
  transition: opacity 0.15s ease;

  &:hover {
    opacity: 0.85;
  }

  &--disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  &--selected .checkbox-field__box {
    background: #999;
    border-color: #999;
  }

  &__box {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 0.3rem;
    border: 0.75px solid #c2c2c2;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  &__label {
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #5d5d5d;
    white-space: nowrap;
  }
}
</style>
