export default function LocationMapToolbar({
  mode,
  editorTool,
  hasAnyMap,
  canManage,
  zoom,
  setZoom,
  onFit,
  onView,
  onEdit,
  onPanMode,
  onEditObjects,
}) {
  return (
    <section className="location-map-toolbar" aria-label="Map controls">
      <div className="location-map-mode-group">
        <div className="location-map-mode-buttons" aria-label="Map mode">
          <button
            type="button"
            className={mode === "view" ? "active" : ""}
            disabled={!hasAnyMap}
            onClick={onView}
            aria-pressed={mode === "view"}
          >
            View
          </button>
          {canManage ? (
            <button
              type="button"
              className={mode === "edit" ? "active" : ""}
              disabled={!hasAnyMap}
              onClick={onEdit}
              aria-pressed={mode === "edit"}
            >
              Edit Draft
            </button>
          ) : null}
        </div>
        {mode === "edit" && canManage ? (
          <div className="location-map-tool-buttons" aria-label="Edit tool">
            <button
              type="button"
              className={editorTool === "pan" ? "active is-pan" : ""}
              onClick={onPanMode}
              aria-pressed={editorTool === "pan"}
            >
              Pan Mode
            </button>
            <button
              type="button"
              className={editorTool === "edit" ? "active is-edit" : ""}
              onClick={onEditObjects}
              aria-pressed={editorTool === "edit"}
            >
              Edit Objects
            </button>
          </div>
        ) : null}
      </div>

      <div className="location-map-zoom-controls" aria-label="Zoom controls">
        <button
          type="button"
          onClick={() => setZoom((value) => Math.max(0.45, value - 0.15))}
          disabled={!hasAnyMap}
          aria-label="Zoom out"
        >
          -
        </button>
        <span>{Math.round(zoom * 100)}%</span>
        <button
          type="button"
          onClick={() => setZoom((value) => Math.min(1.6, value + 0.15))}
          disabled={!hasAnyMap}
          aria-label="Zoom in"
        >
          +
        </button>
        <button type="button" onClick={onFit} disabled={!hasAnyMap}>
          Fit
        </button>
      </div>
    </section>
  );
}