<template>
    <div class="left-center checkbox-wrapper">
        <div class="checkbox" :class="{ checked: checked }"><UiIcon v-if="checked" class="check">check</UiIcon></div>
        <label><slot></slot></label>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    checked: boolean
}>()
</script>

<style scoped>
.checkbox-wrapper {
    cursor: pointer;
    user-select: none;
}
.checkbox {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid black;
    border-radius: 0.25rem;
}
.checkbox.checked {
    background-color: black;
}
.check {
    color: white;
}
</style>