import React from 'react';
import { MousePointer2, GitCommitHorizontal, Radio, Disc, Eraser, Save, Upload, Minus, Spline } from 'lucide-react';
import { ToolType } from '../types';

interface EditorToolbarProps {
  activeTool: ToolType;
  setTool: (t: ToolType) => void;
  onSave: () => void;
  onLoad: () => void;
}

const EditorToolbar: React.FC<EditorToolbarProps> = ({ activeTool, setTool, onSave, onLoad }) => {
  const tools = [
    { id: ToolType.SELECT, icon: <MousePointer2 size={20} />, label: 'Select/Move' },
    { id: ToolType.DRAW_LINE, icon: <GitCommitHorizontal size={20} />, label: 'Logical Connection (Graph)' },
    { id: ToolType.DRAW_MAGNET_STRAIGHT, icon: <Minus size={20} />, label: 'Magnet Line (Straight)' },
    { id: ToolType.DRAW_MAGNET_CURVE, icon: <Spline size={20} />, label: 'Magnet Line (Curve)' },
    { id: ToolType.ADD_RFID, icon: <Radio size={20} />, label: 'Place RFID' },
    { id: ToolType.ADD_MARK, icon: <Disc size={20} />, label: 'Place Mark' },
    { id: ToolType.ERASER, icon: <Eraser size={20} />, label: 'Delete' },
  ];

  return (
    <div className="flex flex-col gap-2 bg-gray-800 p-2 rounded-lg border border-gray-700 h-full">
      <div className="text-xs font-bold text-gray-400 mb-2 uppercase text-center">Map Editor</div>
      {tools.map((tool) => (
        <button
          key={tool.id}
          onClick={() => setTool(tool.id)}
          title={tool.label}
          className={`p-3 rounded-md transition-colors flex justify-center items-center ${
            activeTool === tool.id
              ? 'bg-blue-600 text-white'
              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
          }`}
        >
          {tool.icon}
        </button>
      ))}
      <div className="h-px bg-gray-600 my-2" />
      <button onClick={onSave} className="p-3 bg-green-700 hover:bg-green-600 text-white rounded-md flex justify-center" title="Save Map">
        <Save size={20} />
      </button>
      <button onClick={onLoad} className="p-3 bg-yellow-700 hover:bg-yellow-600 text-white rounded-md flex justify-center" title="Load Map">
        <Upload size={20} />
      </button>
    </div>
  );
};

export default EditorToolbar;