"use client";

import { ChevronRight } from "lucide-react";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import { getNodePaletteItem } from "./sidebar/nodePaletteConfig";

export function FlowBreadcrumb() {
  const { flowName, nodes, selectedNodes } = useFlowEditorStore();

  const selectedNode =
    selectedNodes.length === 1
      ? nodes.find((n) => n.id === selectedNodes[0])
      : null;

  const nodeInfo = selectedNode
    ? getNodePaletteItem(selectedNode.type as string)
    : null;

  return (
    <div className="flex items-center gap-1.5 text-xs">
      <span className="text-zinc-500">데이터 경로</span>
      <ChevronRight className="h-3 w-3 text-zinc-600" />
      <span className="font-medium text-zinc-300">{flowName || "새 플로우"}</span>
      {selectedNode && (
        <>
          <ChevronRight className="h-3 w-3 text-zinc-600" />
          <span className="flex items-center gap-1.5">
            {nodeInfo && (
              <span
                className="inline-block h-2 w-2 rounded-full"
                style={{ backgroundColor: nodeInfo.color }}
              />
            )}
            <span className="text-violet-400">
              {(selectedNode.data as any)?.displayName || nodeInfo?.label || selectedNode.type}
            </span>
          </span>
        </>
      )}
    </div>
  );
}