import React from 'react';
import { Terminal } from 'lucide-react';
import { CyberPanel } from './common/CyberPanel';
import { LogEntry } from '../types';

interface EventLogPanelProps {
    logs: LogEntry[];
}

export const EventLogPanel: React.FC<EventLogPanelProps> = ({ logs }) => {
    return (
        <CyberPanel className="flex-1 flex flex-col min-h-0">
            <div className="mb-2 flex items-center justify-between text-xs text-neon-blue font-bold tracking-widest uppercase border-b border-white/10 pb-2">
                <span>Event Log</span>
                <Terminal className="w-3 h-3" />
            </div>
            <div className="flex-1 overflow-y-auto font-mono text-[10px] space-y-1 pr-1 custom-scrollbar">
                {logs.map(log => (
                    <div key={log.id} className={`flex gap-2 ${log.type === 'error' ? 'text-red-500' : log.type === 'warning' ? 'text-amber-400' : 'text-slate-400'}`}>
                        <span className="opacity-50">[{log.timestamp}]</span>
                        <span>{log.message}</span>
                    </div>
                ))}
            </div>
        </CyberPanel>
    );
};