import { useGraphStore } from "../../store/graphStore";

export function Toolbar() {
  const { startCreatingNode, loading, refresh, setLayoutType, layoutType } =
    useGraphStore();

  const layouts = [{ type: "force" as const, label: "力导向", icon: "🕸️" }];

  return (
    <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center gap-2">
      <button
        type="button"
        onClick={startCreatingNode}
        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
        disabled={loading}
      >
        <span>➕</span>
        <span>添加节点</span>
      </button>

      <div className="w-px h-6 bg-gray-300 dark:bg-gray-600" />

      <button
        type="button"
        onClick={refresh}
        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50"
        disabled={loading}
      >
        <span>🔄</span>
        <span>刷新</span>
      </button>
    </div>
  );
}