"use client";

import { memo } from "react";
import { NodeProps } from "reactflow";
import { Globe } from "lucide-react";
import { CompactNodeShell } from "./CompactNodeShell";
import type { RestAPISourceNodeData } from "@/types/node-editor";

export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISourceNodeData>) => {
  const method = data.method || "GET";
  const summary = data.url
    ? `${method} ${data.url}`
    : "API URL을 입력해 주세요";

  return (
    <CompactNodeShell
      color="#10B981"
      label={data.displayName || "REST API"}
      summary={summary}
      icon={<Globe className="h-3.5 w-3.5" />}
      selected={selected}
      hasInput={false}
    >
      {data.url && (
        <div className="flex items-center gap-1.5">
          <span className="rounded bg-emerald-500/20 px-1 py-0.5 font-mono text-[9px] font-semibold text-emerald-400">
            {method}
          </span>
          <span className="break-all font-mono">{data.url}</span>
        </div>
      )}
    </CompactNodeShell>
  );
});

RestAPISourceNode.displayName = "RestAPISourceNode";