<script lang="ts">
  let {
    checked = $bindable(false),
    disabled = false,
    label = '',
    name = '',
    value = '',
  } = $props();
</script>

<label class="inline-flex cursor-pointer items-center {disabled ? 'cursor-not-allowed opacity-60' : ''}">
  <input
    type="checkbox"
    bind:checked
    {disabled}
    {name}
    {value}
    class="h-5 w-5 rounded border-[1.5px] border-stein-400 text-wald-500 hover:border-wald-400 focus:ring-2 focus:ring-wald-100 focus:ring-offset-0 checked:border-wald-500 checked:bg-wald-500"
  />
  {#if label}
    <span class="ml-2 text-base text-stein-700">{label}</span>
  {/if}
</label>
