import { useEffect, useRef } from 'react';
import type { LogEntry } from '@stream-control/shared';
import { formatTime } from '../format';

export function LogPanel({ logs }: { logs: LogEntry[] }) {
  const endRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    endRef.current?.scrollIntoView({ block: 'end' });
  }, [logs.length]);

  return (
    <section className="logs">
      <h3>Journal</h3>
      <div className="log-list">
        {logs.length === 0 && <p className="muted small">Aucun évènement pour le moment.</p>}
        {logs.map((entry) => (
          <div key={entry.id} className={`log-line level-${entry.level}`}>
            <span className="mono small muted">{formatTime(entry.ts)}</span>
            <span className="log-agent">{entry.agentName ?? 'serveur'}</span>
            <span className="log-message">{entry.message}</span>
          </div>
        ))}
        <div ref={endRef} />
      </div>
    </section>
  );
}