// Reuses the visual treatment defined in ZoomControls.css (same pill
// chrome — white rounded container, brand-pink hover, disabled state).
// We import that CSS rather than copy the rules to keep the two
// pills perfectly in sync; if the pill chrome is ever refined in
// ZoomControls.css the same look applies here automatically.
//
// Future cleanup: extract `.zoom-controls` / `.zoom-controls__btn` to a
// shared `.pill-toolbar` block in a neutral file and migrate both
// components. Not done now because the rename touches multiple
// components and isn't blocking — the import-reuse is enough to keep
// these visually identical in the meantime.
import '../../styles/ZoomControls.css';
import { t } from '../../i18n/t';

/**
 * Undo / Redo controls.
 *
 * Lives in the canvas-area's bottom bar alongside the zoom/snap pill,
 * so all canvas-level "editor view" actions cluster together. Moved
 * out of the Header in Change 19 — the Header had become crowded
 * with seven distinct actions (undo, redo, clear, preview, download,
 * Save, Share, cart) and the undo/redo pair was the most obviously
 * "editor view" rather than "ship the design" group.
 *
 * Each button is disabled when its action isn't available (no
 * history past this point in either direction). The icons match
 * what was previously in the Header: a curved arrow turning back
 * left for undo, the same arrow mirrored for redo.
 *
 * i18n: the strings live under `header.undo` / `header.redo` keys
 * historically. We continue to use them here even though the buttons
 * have moved out of the header — they're functional labels not
 * location-specific, and renaming them would mean updating every
 * locale file. The keys are flat strings, the namespace prefix is
 * just punctuation.
 */
export function HistoryControls({ canUndo, onUndo, canRedo, onRedo }) {
  return (
    <div className="zoom-controls" role="toolbar" aria-label="Edit history">
      <button
        type="button"
        className="zoom-controls__btn"
        onClick={onUndo}
        disabled={!canUndo}
        aria-label={t('header.undo')}
        title={t('header.undo-tooltip')}
      >
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          {/* Curved arrow turning back to the left — universal undo glyph. */}
          <path d="M9 14L4 9l5-5" />
          <path d="M4 9h11a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5h-4" />
        </svg>
      </button>
      <button
        type="button"
        className="zoom-controls__btn"
        onClick={onRedo}
        disabled={!canRedo}
        aria-label={t('header.redo')}
        title={t('header.redo-tooltip')}
      >
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          {/* Mirror of the undo glyph. */}
          <path d="M15 14l5-5-5-5" />
          <path d="M20 9H9a5 5 0 0 0-5 5v0a5 5 0 0 0 5 5h4" />
        </svg>
      </button>
    </div>
  );
}
