import React from 'react';

export default function Console({ logs }) {
  const bottomRef = React.useRef(null);

  React.useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [logs]);

  return (
    <div className="mt-auto bg-black rounded-lg p-3 font-mono text-xs h-40 overflow-y-auto border border-border flex flex-col">
      {logs.length === 0 && (
        <div className="text-muted italic">System Ready. Awaiting input...</div>
      )}
      {logs.map((log, i) => (
        <div key={i} className="mb-1 flex gap-2">
          <span className="text-gray-600">[{log.time}]</span>
          <span className={`
            ${log.type === 'success' ? 'text-success' : ''}
            ${log.type === 'warn' ? 'text-warning' : ''}
            ${log.type === 'info' ? 'text-primary' : ''}
            ${log.type === 'error' ? 'text-red-500' : ''}
          `}>
            {log.message}
          </span>
        </div>
      ))}
      <div ref={bottomRef} />
    </div>
  );
}