<script setup lang="ts">
defineProps<{
    checked?: boolean;
    disabled?: boolean;
    id?: string;
    name?: string;
}>();

defineEmits(['update:checked']);
</script>

<template>
    <input
        type="checkbox"
        :id="id"
        :name="name"
        :checked="checked"
        :disabled="disabled"
        @change="$emit('update:checked', ($event.target as HTMLInputElement).checked)"
        class="h-4 w-4 rounded border-[#151515] bg-[#0a0a0a] text-[#ff007a] focus:ring-[#ff007a] focus:ring-offset-[#020202] disabled:cursor-not-allowed disabled:opacity-50"
    />
</template>
