import React from "react";
export function Switch({ label, checked, defaultChecked = false, onChange, style }) {
  const [inner, setInner] = React.useState(defaultChecked);
  const isOn = checked !== undefined ? checked : inner;
  const toggle = () => { if (checked === undefined) setInner(!isOn); if (onChange) onChange(!isOn); };
  return (
    <label onClick={toggle} style={{ display: "inline-flex", alignItems: "center", gap: "10px", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--fg)", userSelect: "none", ...style }}>
      <span style={{
        width: "38px", height: "22px", borderRadius: "9999px", position: "relative", flexShrink: 0,
        background: isOn ? "var(--accent)" : "var(--bg-deep)",
        border: "1px solid " + (isOn ? "var(--rr-gold)" : "var(--border-strong)"),
        transition: "background 160ms, border-color 160ms"
      }}>
        <span style={{ position: "absolute", top: "2px", left: isOn ? "18px" : "2px", width: "16px", height: "16px", borderRadius: "50%", background: isOn ? "var(--rr-cream)" : "var(--rr-muted)", transition: "left 160ms, background 160ms", boxShadow: "0 1px 2px rgba(1,6,5,0.5)" }}></span>
      </span>
      {label}
    </label>
  );
}