web_client/src/components/Terminal.tsx

import React from 'react';
import { Terminal as TerminalIcon } from 'lucide-react';

interface TerminalProps {
    title: string;
    type: 'vulnerable' | 'protected';
    content: string;
    logs?: string[];
}

export const Terminal: React.FC<TerminalProps> = ({ title, type, content, logs }) => {
    const isProtected = type === 'protected';
    const borderColor = isProtected ? 'border-blue-500/20' : 'border-slate-800';
    const bgColor = isProtected ? 'bg-blue-950/5' : 'bg-slate-900/20';
    const titleColor = isProtected ? 'text-blue-400' : 'text-slate-400';

    return (
        <div className={`glass rounded-2xl border ${borderColor} overflow-hidden flex flex-col ${bgColor} relative h-full`}>
            {isProtected && (
                <div id="upif-scan-overlay" className="absolute top-0 left-0 w-full z-10 hidden">
                    <div className="scanner-line"></div>
                </div>
            )}

            <div className={`bg-slate-900/50 px-4 py-3 flex items-center justify-between border-b ${borderColor}`}>
                <div className="flex items-center gap-2">
                    <TerminalIcon className={`w-3 h-3 ${titleColor}`} />
                    <span className={`text-[10px] font-bold ${titleColor} uppercase tracking-widest`}>
                        {title}
                    </span>
                </div>
                <span className={`text-[10px] ${isProtected ? 'text-blue-400 font-bold' : 'text-slate-500'}`}>
                    {isProtected ? 'DETERMINISTIC' : 'UNFILTERED'}
                </span>
            </div>

            <div className="p-6 text-xs text-slate-400 font-mono flex-1 min-h-[180px] leading-relaxed whitespace-pre-wrap">
                {content || <span className="text-slate-600 italic">No request processed.</span>}
            </div>

            {logs && logs.length > 0 && (
                <div className="border-t border-slate-800 p-2 bg-black/40 text-[10px] font-mono h-24 overflow-y-auto">
                    {logs.map((log, i) => (
                        <div key={i} className="text-slate-500 border-b border-slate-800/50 pb-1 mb-1 last:border-0">
                            {log}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};