@props(['label' => null, 'id' => null])
@php
    $inputId = $id ?? 'checkbox-'.uniqid();
@endphp

<label class="inline-flex cursor-pointer items-center gap-3" @if($inputId) for="{{ $inputId }}" @endif>
    <span class="relative inline-flex h-4 w-4 shrink-0">
        <input
            id="{{ $inputId }}"
            type="checkbox"
            {{ $attributes->class([
                'peer appearance-none h-4 w-4 rounded border border-line bg-inset',
                'checked:bg-accent checked:border-accent',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
                'transition-colors cursor-pointer',
            ]) }}
        />
        {{-- check-mark SVG, shown only when peer checkbox is checked --}}
        <svg
            class="pointer-events-none absolute inset-0 hidden h-4 w-4 peer-checked:block text-void"
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
        >
            <polyline points="3,8 6.5,11.5 13,5" />
        </svg>
    </span>
    @if ($label)
        <span class="select-none text-sm text-ink">{{ $label }}</span>
    @endif
</label>