<script setup lang="ts">
import { useId } from 'vue'
import { IconCheckRounded } from '@iconify-prerendered/vue-material-symbols'

defineProps<{
	label?: string
	disabled?: boolean
}>()

const model = defineModel<boolean>()
const id = useId()
</script>

<template>
	<div class="checkbox-wrapper" :class="{ disabled }" @click.stop="!disabled && (model = !model)">
		<div
			class="checkbox-box"
			:class="{ 'is-checked': model }"
			role="checkbox"
			:aria-checked="model"
			:tabindex="disabled ? -1 : 0"
			@keydown.space.prevent="!disabled && (model = !model)"
		>
			<IconCheckRounded class="check-icon" />
		</div>
		<label v-if="label" :for="id" class="label">{{ label }}</label>
	</div>
</template>

<style scoped>
.checkbox-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	user-select: none;
}

.checkbox-wrapper.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.checkbox-box {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.5rem;
	border: 2px solid hsla(var(--subtext0) / 0.75);
	background-color: hsla(var(--surface0) / 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: hsl(var(--base));

	&:hover {
		background-color: hsla(var(--surface0) / 1);
		border-color: hsla(var(--subtext0) / 0.75);
	}
}

.checkbox-box.is-checked {
	background-color: hsl(var(--accent));
	border-color: hsl(var(--accent));
}

.check-icon {
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s;
}

.checkbox-box.is-checked .check-icon {
	opacity: 1;
	transform: scale(1);
}

.label {
	color: hsl(var(--text));
	font-size: 1rem;
	cursor: inherit;
}
</style>
