instrucoes_gerais/clube67/newwhats.local/frontend/pages/flow-builder/_components/MessageNode.tsx

import React from 'react';
import { Handle, Position } from '@xyflow/react';
import { MessageSquare, Settings2, Image as ImageIcon } from 'lucide-react';

interface MessageNodeProps {
    data: {
        label: string;
        text?: string;
        image?: string;
    };
    isConnectable: boolean;
}

export default function MessageNode({ data, isConnectable }: MessageNodeProps) {
    return (
        <div className="bg-[#121622] border border-blue-500/30 hover:border-blue-500 transition-colors rounded-2xl shadow-xl shadow-blue-500/5 min-w-[260px] max-w-[300px] overflow-hidden group">
            
            <Handle
                type="target"
                position={Position.Left}
                isConnectable={isConnectable}
                className="!w-4 !h-4 !bg-[#121622] !border-2 !border-slate-500"
            />

            {/* Header */}
            <div className="px-4 py-3 border-b border-blue-500/20 bg-blue-500/5 flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <div className="bg-blue-500/20 w-7 h-7 rounded-md flex items-center justify-center">
                        <MessageSquare size={14} className="text-blue-400" />
                    </div>
                    <span className="text-sm font-bold text-slate-200">Envia Mensagem</span>
                </div>
                <button className="text-slate-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
                    <Settings2 size={16} />
                </button>
            </div>

            {/* Body */}
            <div className="p-4 bg-white/[0.01]">
                {data.image && (
                    <div className="w-full h-24 mb-3 rounded-lg border border-white/5 bg-black/40 flex items-center justify-center overflow-hidden relative">
                         <ImageIcon size={20} className="text-slate-500 absolute z-0" />
                         <img src={data.image} className="w-full h-full object-cover relative z-10" alt="Midia" />
                    </div>
                )}
                <div className="text-xs text-slate-300 bg-white/5 p-3 rounded-lg border border-white/5 line-clamp-3 leading-relaxed">
                    {data.text || "Olá, como posso ajudar? Isso é um nó de mensagem."}
                </div>
            </div>

            <Handle
                type="source"
                position={Position.Right}
                isConnectable={isConnectable}
                className="!w-4 !h-4 !bg-[#121622] !border-2 !border-blue-500"
            />
        </div>
    );
}