import { h } from 'preact';
import { Signal } from '@preact/signals-core';

interface CommandLogProps {
  entries: Signal<Array<{ input: string; result: string; timestamp: number }>>;
  maxEntries?: number;
}

export function CommandLog({ entries, maxEntries = 50 }: CommandLogProps) {
  const displayEntries = entries.value.slice(-maxEntries).reverse();

  return (
    <div className="bg-gray-900 text-green-400 font-mono text-xs p-3 rounded-lg overflow-y-auto max-h-48">
      {displayEntries.length === 0 ? (
        <div className="text-gray-500 italic">No commands yet</div>
      ) : (
        <div className="space-y-1">
          {displayEntries.map((entry, i) => (
            <div key={entry.timestamp + '-' + i} className="flex gap-2">
              <span className="text-gray-500">
                {new Date(entry.timestamp).toLocaleTimeString()}
              </span>
              <span className="text-yellow-300">&gt; {entry.input}</span>
              <span className={entry.result.startsWith('OK') ? 'text-green-400' : 'text-red-400'}>
                {entry.result}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}