<script lang="ts">
  import { config } from "../stores/config";

  interface Props {
    checked: boolean;
    onchange?: (value: boolean) => void;
    label?: string;
  }

  let { checked = $bindable(), onchange, label = "Toggle" }: Props = $props();

  function toggle() {
    checked = !checked;
    onchange?.(checked);
  }
</script>

<!-- 44px hit area wrapper (WCAG 2.5.8) with compact visual toggle inside -->
<button
  type="button"
  role="switch"
  aria-label={label}
  aria-checked={checked}
  class="relative inline-flex min-h-[44px] min-w-[52px] shrink-0 cursor-pointer items-center justify-center
         bg-transparent border-none p-0"
  onclick={toggle}
>
  <span
    class="inline-flex h-[28px] w-[52px] items-center rounded-full transition-colors duration-200 ease-in-out"
    style="background: {checked ? $config.accent_color : '#1a1a1a'};"
  >
    <span
      class="pointer-events-none inline-block h-[22px] w-[22px] rounded-full
             shadow-sm transition-transform duration-200 ease-in-out
             {checked ? 'translate-x-[27px] bg-white' : 'translate-x-[3px] bg-[#666]'}"
    ></span>
  </span>
</button>
