<script>
  let { checked = $bindable(false), label = "", description = "" } = $props();
</script>

<div class="flex items-start gap-3 py-2.5">
  <button
    class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
      {checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
      active:scale-95"
    style="transition-duration: var(--duration-ui)"
    onclick={() => checked = !checked}
    role="switch"
    aria-checked={checked}
    aria-label={label}
  >
    <span
      class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
        ease-[cubic-bezier(0.34,1.56,0.64,1)]
        {checked ? 'translate-x-[16px]' : 'translate-x-0'}"
      style="transition: transform var(--duration-ui) cubic-bezier(0.34, 1.56, 0.64, 1)"
    ></span>
  </button>
  <div class="flex-1 min-w-0">
    <p class="text-[13px] text-text leading-tight">{label}</p>
    {#if description}
      <p class="text-[11px] text-text-tertiary mt-0.5 leading-snug">{description}</p>
    {/if}
  </div>
</div>
