<script setup lang="ts">
const model = defineModel<boolean>({ default: false });

defineProps<{
  id?: string;
  disabled?: boolean;
  label?: string;
}>();
</script>

<template>
  <label class="inline-flex min-h-10 items-center gap-2 text-sm text-ink-primary" :for="id">
    <input
      :id="id"
      v-model="model"
      class="h-4 w-4 rounded border-stroke-interactive bg-surface-input text-brand-600 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-focus-offset"
      type="checkbox"
      :disabled="disabled"
    />
    <span><slot>{{ label }}</slot></span>
  </label>
</template>
