const css = `
.m-seg{display:inline-flex;border:1px solid var(--line);font-family:var(--mono);border-radius:var(--radius-sm,4px);overflow:hidden}
.m-seg button{font-family:var(--mono);padding:7px 13px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--faint);background:transparent;border:none;border-radius:0}
.m-seg button + button{border-left:1px solid var(--line)}
.m-seg button.on-hard{background:var(--red-dim);color:var(--red)}
.m-seg button.on-medium{background:var(--amber-dim);color:var(--amber)}
.m-seg button.on-easy{background:var(--green-dim);color:var(--green)}
.m-seg button.on-auto{background:var(--cyan-dim);color:var(--cyan)}
`;
function ensureCss() {
  if (typeof document === 'undefined' || document.getElementById('m-seg-css')) return;
  const s = document.createElement('style'); s.id = 'm-seg-css'; s.textContent = css;
  document.head.appendChild(s);
}
const BASE_OPTS = [['hard', 'HARD'], ['medium', 'MEDIUM'], ['easy', 'EASY']];

export function ComplexitySeg({ value, defaultValue = 'medium', onChange, includeAuto, autoLabel = 'AUTO', labels }) {
  ensureCss();
  const [inner, setInner] = React.useState(defaultValue);
  const cur = value !== undefined ? value : inner;
  const opts = includeAuto ? [...BASE_OPTS, ['auto', autoLabel]] : BASE_OPTS;
  return (
    <span className="m-seg">
      {opts.map(([v, lab]) => (
        <button key={v} type="button" className={cur === v ? 'on-' + v : ''}
          onClick={() => { setInner(v); if (onChange) onChange(v); }}>
          {(labels && labels[v]) || lab}
        </button>
      ))}
    </span>
  );
}