import React from 'react';
import './pdfReader.css';

interface ToolbarProps {
  onZoomIn: () => void;
  onZoomOut: () => void;
  onZoomReset: () => void;
  onExport: () => void;
  onImport: (file: File) => void;
  scale: number;
  readOnly?: boolean;
}

export const Toolbar: React.FC<ToolbarProps> = ({
  onZoomIn,
  onZoomOut,
  onZoomReset,
  onExport,
  onImport,
  scale,
  readOnly = false
}) => {
  const handleImportChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      onImport(file);
    }
    e.target.value = '';
  };

  return (
    <div className="pdf-reader-toolbar">
      <div className="toolbar-group">
        <button onClick={onZoomOut} className="tool-btn" title="缩小">
          −
        </button>
        <span className="zoom-label">{Math.round(scale * 100)}%</span>
        <button onClick={onZoomIn} className="tool-btn" title="放大">
          +
        </button>
        <button onClick={onZoomReset} className="tool-btn" title="重置">
          重置
        </button>
      </div>
      
      {!readOnly && (
        <div className="toolbar-group">
          <button onClick={onExport} className="tool-btn" title="导出批注">
            导出
          </button>
          <label className="tool-btn">
            导入
            <input
              type="file"
              accept=".json"
              onChange={handleImportChange}
              style={{ display: 'none' }}
            />
          </label>
        </div>
      )}
    </div>
  );
};
