<template>
    <div class="input switch" :style="{ width, height }" :class="{ disabled }">
        <input :id="id" class="replace-input" :disabled="disabled" type="checkbox" :checked="props.modelValue" @input="handleInput" />
        <span class="replace" />
    </div>
</template>

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

const handleInput = (event: Event) => {
    emit('update:modelValue', (event.target as HTMLInputElement).checked)
}
</script>
