// ExperiencePanel.jsx — visual mode switcher.

const MODES = [
  { id: 'laser', name: 'Laser', truth: 'Measured', truthClass: 'measured', desc: 'oscilloscope' },
];

function ExperiencePanel({ mode, setMode, onProof, proofOpen, onSave }) {
  return (
    <div className="mm-panel mm-experience">
      <div className="mm-label">View</div>

      <div className="mm-mode-switcher">
        {MODES.map(m => (
          <button
            key={m.id}
            className={"mm-mode " + (mode === m.id ? "mm-mode--active" : "")}
            onClick={() => setMode(m.id)}
            title={m.truth + ' · ' + m.desc}
            aria-pressed={mode === m.id}
          >
            <div className="mm-mode__name">{m.name}</div>
          </button>
        ))}
      </div>

      <div className="mm-btn-row mm-btn-row--end">
        <button className={"mm-btn mm-btn--alt " + (proofOpen ? "mm-btn--active" : "")} onClick={onProof}>
          {proofOpen ? 'Hide proof' : 'Proof layer'}
        </button>
        <button className="mm-btn mm-btn--alt" onClick={onSave}>Save relic</button>
      </div>
    </div>
  );
}

Object.assign(window, { ExperiencePanel, MODES });