export default function LogsPanel({ logs }) {
  return (
    <aside className="bg-nexus-panel border-l border-nexus-border flex flex-col h-full">
      <div className="p-4 border-b border-nexus-border flex justify-between items-center">
        <span className="text-[10px] uppercase tracking-wider font-bold text-nexus-muted">System Logs</span>
        <div className="text-nexus-muted opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
        </div>
      </div>
      <div className="flex-1 p-4 font-mono text-xs overflow-y-auto bg-black/20 space-y-2">
        {logs.map((log, idx) => (
          <div key={idx} className="animate-fade-in flex gap-2">
            <span className="text-nexus-muted shrink-0">{log.time}</span>
            <span className={`shrink-0 font-bold ${
              log.type === 'info' ? 'text-nexus-primary' :
              log.type === 'warn' ? 'text-nexus-warning' :
              log.type === 'success' ? 'text-nexus-success' :
              'text-nexus-muted'
            }`}>
              {log.type.toUpperCase()}
            </span>
            <span className="text-nexus-muted/80">{log.message}</span>
          </div>
        ))}
      </div>
    </aside>
  );
}