@props([
    'name',
    'label' => null,
    'error' => null,
    'hint' => null,
    'value' => '1',
    'checked' => false,
])

@php
    $id = $attributes->get('id', $name);
@endphp

<div {{ $attributes->only('class')->merge(['class' => 'w-full']) }}>
    <label for="{{ $id }}" class="inline-flex items-start gap-2 cursor-pointer">
        <input
            type="checkbox"
            name="{{ $name }}"
            id="{{ $id }}"
            value="{{ $value }}"
            @checked($checked)
            @if ($error) aria-invalid="true" @endif
            {{ $attributes->except('class')->merge([
                'class' => 'mt-0.5 h-4 w-4 rounded border-[var(--color-border)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]',
            ]) }}
        >
        @if ($label)
            <span class="text-sm text-[var(--color-text)]">{{ $label }}</span>
        @endif
    </label>

    @if ($error)
        <p class="mt-1 text-xs text-[var(--color-danger)]">{{ $error }}</p>
    @elseif ($hint)
        <p class="mt-1 text-xs text-[var(--color-text-muted)]">{{ $hint }}</p>
    @endif
</div>