<script setup lang="ts">
import type { CheckboxControl } from '@/components/inspector/controls'
import { useId } from 'vue'
import BaseNamedControlView from './BaseNamedControlView.vue'

const {
  control,
} = defineProps<{
  control: CheckboxControl
}>()

const id = useId()
</script>

<template>
  <BaseNamedControlView :id :control>
    <label
      class="tw:flex tw:flex-row tw:gap-1 tw:items-baseline control-label"
      :class="{ 'control-label__disabled': control.disabled }"
    >
      <input
        :id
        v-model="control.ref"
        type="checkbox"
        :disabled="control.disabled"
      >
      <component :is="control.icon" class="tw:flex-none tw:w-4 tw:h-4 tw:fill-current tw:self-center" />
      <span v-if="control.label">
        {{ control.label }}
      </span>
    </label>
  </BaseNamedControlView>
</template>

<style scoped></style>
