import React from 'react';
import { BaseNode } from '../BaseNode';
import { NodePort } from '../../../types/canvas';

interface TextDisplayNodeProps {
  id: string;
  data: {
    inputText?: string;
    result?: string;
  };
}

export const TextDisplayNode: React.FC<TextDisplayNodeProps> = ({ id, data }) => {
  const inputs: NodePort[] = [
    { id: 'text-input', type: 'text', label: '文本输入', position: 'input' }
  ];

  return (
    <BaseNode
      id={id}
      title="文本显示"
      inputs={inputs}
    >
      <div className="space-y-2">
        {data.result ? (
          <div className="bg-gray-50 p-3 rounded-md">
            <div className="text-sm text-gray-800 whitespace-pre-wrap max-h-32 overflow-y-auto">
              {data.result}
            </div>
          </div>
        ) : (
          <div className="text-xs text-gray-400 text-center py-4">
            等待输入数据...
          </div>
        )}
        
        {data.result && (
          <div className="flex justify-between items-center text-xs text-gray-500">
            <span>{data.result.length} 字符</span>
            <button
              onClick={() => navigator.clipboard.writeText(data.result || '')}
              className="text-blue-500 hover:text-blue-700 transition-colors"
            >
              复制
            </button>
          </div>
        )}
      </div>
    </BaseNode>
  );
};
