"use client";
import { memo } from "react";
import { NodeShell } from "./NodeShell";
import { KIND_META } from "./nodeTypes";

export const SaveVarNode = memo(function SaveVarNode({ id, selected, data }: any) {
  const m = KIND_META.save_var;
  return (
    <NodeShell id={id} selected={selected} color={m.color} border={m.border} analytics={data.analytics}>
      <div className={`bg-gradient-to-r ${m.gradient} px-4 py-2.5 rounded-t-[14px] flex items-center gap-2`}>
        <span className="text-lg">{m.icon}</span>
        <div className="flex-1 min-w-0">
          <p className="text-white font-bold text-[12px] truncate">{data.label}</p>
          <p className="text-white/70 text-[10px]">{m.label}</p>
        </div>
        <span className="text-[9px] bg-white/20 text-white font-black px-2 py-0.5 rounded-full font-mono">
          {`{{${data.varName || "var"}}}`}
        </span>
      </div>
      <div className="bg-white px-4 py-3 rounded-b-[14px]" style={{ width: 230 }}>
        {data.varPrompt ? (
          <div className="bg-cyan-50 rounded-xl px-3 py-2 border border-cyan-100">
            <p className="text-[10px] text-cyan-500 font-bold mb-0.5">Asks patient:</p>
            <p className="text-[11px] text-cyan-800 line-clamp-2">{data.varPrompt}</p>
          </div>
        ) : (
          <div className="border-2 border-dashed border-cyan-200 rounded-xl py-3 text-center">
            <p className="text-[11px] text-cyan-400 font-medium">Click to set question</p>
          </div>
        )}
      </div>
    </NodeShell>
  );
});
