import React from "react";
export function Checkbox({ 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: "18px", height: "18px", borderRadius: "4px", display: "grid", placeItems: "center",
        background: isOn ? "var(--accent)" : "var(--bg-deep)",
        border: "1px solid " + (isOn ? "var(--rr-gold)" : "var(--border-strong)"),
        boxShadow: isOn ? "0 0 0 1px var(--rr-gold-soft)" : "inset 0 1px 4px rgba(1,6,5,0.6)",
        color: "var(--rr-ink)", fontSize: "12px", fontWeight: 900, transition: "background 160ms, border-color 160ms"
      }}>{isOn ? "✓" : ""}</span>
      {label}
    </label>
  );
}