"use client";

/**
 * 주석 노드 - 플로우 설명용
 */

import { memo } from "react";
import { NodeProps } from "reactflow";
import { MessageSquare } from "lucide-react";
import type { CommentNodeData } from "@/types/node-editor";

export const CommentNode = memo(({ data, selected }: NodeProps<CommentNodeData>) => {
  return (
    <div
      className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-yellow-50 shadow-sm transition-all ${
        selected ? "border-yellow-500 shadow-md" : "border-yellow-300"
      }`}
    >
      <div className="p-3">
        <div className="mb-2 flex items-center gap-2">
          <MessageSquare className="h-4 w-4 text-yellow-600" />
          <span className="text-xs font-semibold text-yellow-800">메모</span>
        </div>
        <div className="text-sm whitespace-pre-wrap text-gray-700">{data.content || "메모를 입력하세요..."}</div>
      </div>
    </div>
  );
});

CommentNode.displayName = "CommentNode";