import styles from './ProcessDiagram.module.css';

interface ZoomControlsProps {
  onZoomIn: () => void;
  onZoomOut: () => void;
  onFitToView: () => void;
  scale: number;
}

export function ZoomControls({ onZoomIn, onZoomOut, onFitToView, scale }: ZoomControlsProps) {
  return (
    <div className={styles.zoomControls}>
      <button className={styles.zoomBtn} onClick={onZoomIn} title="Zoom in (+)">+</button>
      <span className={styles.zoomLevel}>{Math.round(scale * 100)}%</span>
      <button className={styles.zoomBtn} onClick={onZoomOut} title="Zoom out (-)">−</button>
      <button className={styles.zoomBtn} onClick={onFitToView} title="Fit to view (0)">⊡</button>
    </div>
  );
}
