<script lang="ts">
    interface Props {
        checked: boolean;
        onclick: () => void;
        disabled?: boolean;
        class?: string;
    }

    let {
        checked,
        onclick,
        disabled = false,
        class: className = "",
    }: Props = $props();
</script>

<button
    {onclick}
    {disabled}
    class="w-8 h-8 cursor-pointer p-0 flex items-center justify-center border-4 border-black disabled:opacity-50 disabled:cursor-not-allowed {checked
        ? 'bg-kv-yellow'
        : 'bg-white'} {className}"
>
    {#if checked}
        <svg width="18" height="15" viewBox="0 0 18 15" fill="none">
            <path
                d="M6 14.1L0 8.1L2.1 6L6 9.9L15.9 0L18 2.1L6 14.1Z"
                fill="black"
            />
        </svg>
    {:else}
        <svg viewBox="0 0 24 24" fill="black" class="w-4 h-4">
            <path
                d="M6.6188 19.4811L4.5188 17.3811L9.9188 11.9811L4.5188 6.61855L6.6188 4.51855L12.0188 9.91855L17.3813 4.51855L19.4813 6.61855L14.0813 11.9811L19.4813 17.3811L17.3813 19.4811L12.0188 14.0811L6.6188 19.4811Z"
            />
        </svg>
    {/if}
</button>
