const ddSwitchCss = `
.dd-switch {
  position: relative; display: inline-block; width: 40px; height: 24px;
  border-radius: var(--radius-full); background: var(--surface-3);
  border: none; cursor: pointer; padding: 0; flex: none;
  transition: background var(--dur-base) var(--ease-out);
}
.dd-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(17,19,26,0.25); /* ds-ignore: 拇指投影，gray-950 的 25% 派生 */
  transition: transform var(--dur-base) var(--ease-out);
}
.dd-switch[aria-checked="true"] { background: var(--accent); }
.dd-switch[aria-checked="true"]::after { transform: translateX(16px); }
.dd-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dd-switch[disabled] { opacity: 0.45; pointer-events: none; }
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-switch-css')) {
  const s = document.createElement('style');
  s.id = 'dd-switch-css';
  s.textContent = ddSwitchCss;
  document.head.appendChild(s);
}

export function Switch({ checked = false, onChange, disabled = false, ...rest }) {
  return (
    <button type="button" role="switch" className="dd-switch"
      aria-checked={checked ? 'true' : 'false'} disabled={disabled}
      onClick={() => onChange && onChange(!checked)} {...rest}></button>
  );
}