interface SwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label?: string;
}

export function Switch({ checked, onChange, label }: SwitchProps) {
  return (
    <label class="flex items-center gap-3 cursor-pointer select-none">
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        onClick={() => onChange(!checked)}
        class="relative w-10 h-5 rounded-full transition-colors duration-200"
        style={{ background: checked ? "var(--z-accent)" : "rgba(255,255,255,0.08)", border: `1px solid ${checked ? "var(--z-accent)" : "rgba(255,255,255,0.15)"}` }}
      >
        <span
          class="absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white transition-transform duration-200"
          style={{ transform: checked ? "translateX(21px)" : "translateX(3px)" }}
        />
      </button>
      {label && <span class="text-[var(--z-font-md)]">{label}</span>}
    </label>
  );
}
