import { Handle, Position } from "@xyflow/react";
import type { NodeProps } from "@xyflow/react";

import type { DiagramNode } from "../graph";
import { HIDDEN_HANDLE } from "./constants";

export function ArchQueueNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & { label: string };
  const icon = d.icon || "📨";
  const metadata = d.tag;

  return (
    <div className="arch-queue">
      <div className="arch-node-icon">{icon}</div>
      <div className="arch-node-info">
        <div className="arch-node-label">{d.label}</div>
        {metadata && <div className="arch-node-meta">{metadata}</div>}
      </div>
      <Handle type="target" position={Position.Top} style={HIDDEN_HANDLE} />
      <Handle type="source" position={Position.Bottom} style={HIDDEN_HANDLE} />
      <Handle type="target" position={Position.Left} id="left" style={HIDDEN_HANDLE} />
      <Handle type="source" position={Position.Right} id="right" style={HIDDEN_HANDLE} />
    </div>
  );
}
