<template>
  <div class="input radio" :style="{ width, height }">
    <input 
      :disabled="disabled"
      :id="id"
      type="checkbox" 
      :checked="props.modelValue"
      @input="ev => emit('update:modelValue', ev.target.checked)"
    >
    <span class="replace">
      <icon 
        type="checkbox" 
        :size="width > height ? height: width" 
      />
    </span>
  </div>
  <label class="label" v-if="props.label" :for="id">
    {{ props.label }}
  </label>
</template>

<script setup>
import icon from '../icon'
import { checkboxPropsDesc } from './state'
import { randomId } from '../../utils'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(checkboxPropsDesc)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)
</script>