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

<label class="inline-flex cursor-pointer items-center gap-2 {disabled ? 'cursor-not-allowed opacity-60' : ''}">
  <span
    class="relative inline-block h-6 w-11 shrink-0 rounded-full transition-all duration-200 {checked ? 'bg-wald-500' : 'bg-stein-300'}"
    role="switch"
    aria-checked={checked}
  >
    <input
      type="checkbox"
      class="sr-only"
      bind:checked
      {disabled}
      onkeydown={(e) => e.key === ' ' && (checked = !checked)}
    />
    <span
      class="absolute top-0.5 inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 {checked ? 'left-[22px] translate-x-0.5' : 'left-0.5'}"
    ></span>
  </span>
  {#if label}
    <span class="text-base text-stein-700">{label}</span>
  {/if}
</label>
