import React from 'react';
import { MODES } from '../lib/modes.js';

// ModeLegend — row of mode buttons above the folio body.
// Clicking a mode calls onSetAllModes(modeId), setting every note to that mode.
// Tooltip text mirrors prototype: "set every note to {label}".
// DOM structure and classNames are byte-faithful to the legend row in prototype/reader.jsx.
export default function ModeLegend({ onSetAllModes }) {
  return (
    <div className="ap-legend">
      {MODES.map((m) => (
        <button
          key={m.id}
          className="ap-legend-item"
          style={{ '--mode-c': 'var(--mc-' + m.id + ')' }}
          title={'set every note to ' + m.label}
          onClick={() => onSetAllModes(m.id)}
        >
          <span className="ap-legend-dot"></span>{m.label}
        </button>
      ))}
    </div>
  );
}