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

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'
import icon from '@kankan/components/basic/icon'
import { randomId } from '@kankan/utils'
import { checkRadioProps } from './checkRadio'
const props = defineProps(checkRadioProps)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)

defineOptions({
    name: 'UIRadio',
})
</script>
