import { Handle, Position } from "@xyflow/react";
import type { NodeProps } from "@xyflow/react";
import type { DiagramNode } from "../graph";
import { HIDDEN_HANDLE } from "../architecture/constants";

export function FlowTerminalNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & { label: string };
  const isStart = d.tag === "start";
  const isEnd = d.tag === "end";

  return (
    <div
      className={`flow-terminal${isStart ? " flow-terminal-start" : ""}${isEnd ? " flow-terminal-end" : ""}`}
      style={d.color ? { borderColor: d.color } : undefined}
    >
      <span className="flow-node-label">{d.label}</span>
      <Handle type="target" position={Position.Top} style={HIDDEN_HANDLE} />
      <Handle
        type="target"
        position={Position.Left}
        id="left"
        style={HIDDEN_HANDLE}
      />
      <Handle
        type="source"
        position={Position.Bottom}
        style={HIDDEN_HANDLE}
      />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        style={HIDDEN_HANDLE}
      />
    </div>
  );
}
