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

interface ImageDisplayNodeProps {
  id: string;
  data: {
    inputImage?: string;
    result?: string;
  };
}

export const ImageDisplayNode: React.FC<ImageDisplayNodeProps> = ({ id, data }) => {
  const inputs: NodePort[] = [
    { id: 'image-input', type: 'image', label: '图片输入', position: 'input' }
  ];

  const handleDownload = () => {
    if (data.result) {
      const link = document.createElement('a');
      link.href = data.result;
      link.download = `generated-image-${Date.now()}.png`;
      link.click();
    }
  };

  return (
    <BaseNode
      id={id}
      title="图片显示"
      inputs={inputs}
    >
      <div className="space-y-2">
        {data.result ? (
          <div className="space-y-2">
            <img 
              src={data.result} 
              alt="显示图片" 
              className="w-full h-32 object-cover rounded border"
            />
            <div className="flex justify-between items-center">
              <span className="text-xs text-gray-500">图片已加载</span>
              <button 
                onClick={handleDownload}
                className="text-xs text-blue-500 hover:text-blue-700 transition-colors"
              >
                下载
              </button>
            </div>
          </div>
        ) : (
          <div className="w-full h-32 border-2 border-dashed border-gray-300 rounded flex items-center justify-center text-xs text-gray-400">
            等待图片输入...
          </div>
        )}
      </div>
    </BaseNode>
  );
};
