"use client";

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

export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNodeData>) => {
  const fieldCount = data.fields?.length || 0;
  const summary = data.tableName
    ? `${data.tableName} (${fieldCount}개 필드)`
    : "테이블을 선택해 주세요";

  return (
    <CompactNodeShell
      color="#3B82F6"
      label={data.displayName || data.tableName || "테이블 소스"}
      summary={summary}
      icon={<Database className="h-3.5 w-3.5" />}
      selected={selected}
      hasInput={false}
    >
      {fieldCount > 0 && (
        <div className="space-y-0.5">
          {data.fields!.slice(0, 4).map((f) => (
            <div key={f.name} className="flex items-center gap-1.5">
              <div className="h-1 w-1 flex-shrink-0 rounded-full bg-blue-400" />
              <span>{f.label || f.displayName || f.name}</span>
            </div>
          ))}
          {fieldCount > 4 && (
            <span className="text-zinc-600">외 {fieldCount - 4}개</span>
          )}
        </div>
      )}
    </CompactNodeShell>
  );
});

TableSourceNode.displayName = "TableSourceNode";