@props([
'name',
'required' => false,
'class' => '',
])

@php
$hasError = $errors->has($name);
$checkboxClasses = cn(
'size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-colors appearance-none cursor-pointer accent-primary',
'checked:bg-primary checked:border-primary checked:text-primary-foreground',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
$hasError ? 'border-destructive ring-destructive/20' : '',
$class
);
@endphp

<div class="flex flex-row items-start space-x-3 space-y-0">
    <input
        type="checkbox"
        id="{{ $name }}"
        name="{{ $name }}"
        value="1"
        class="{{ $checkboxClasses }}"
        {{ old($name) ? 'checked' : '' }}
        @if($required) required @endif
        @if($hasError) aria-invalid="true" aria-describedby="{{ $name }}-error" @endif />

    <div class="space-y-1 leading-none">
        <label for="{{ $name }}" class="text-sm font-normal cursor-pointer text-foreground">
            {{ $slot }}
        </label>
        @error($name)
        <p id="{{ $name }}-error" class="text-destructive text-sm" role="alert">{{ $message }}</p>
        @enderror
    </div>
</div>