import { useRef } from 'react';
import LogRenderer from './LogRenderer';
import type { LogRendererEntry } from './LogRenderer';

interface LogEntry {
  id: string;
  timestamp: Date;
  level: string;
  component: string;
  message: string;
  metadata?: unknown;
}

interface LogPanelProps {
  logs: LogEntry[];
  expanded: boolean;
  onToggleExpand: () => void;
}

export default function LogPanel({ logs, expanded, onToggleExpand }: LogPanelProps) {
  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <div
      className={`border-t border-border-subtle bg-bg-secondary flex flex-col ${
        expanded ? 'flex-1' : 'h-48'
      }`}
    >
      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary shrink-0">
        <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
          Log
        </h3>
        <button
          onClick={onToggleExpand}
          className="w-6 h-6 flex items-center justify-center text-text-muted hover:text-text-secondary transition-colors"
          title={expanded ? 'Collapse' : 'Expand'}
        >
          {expanded ? '▾' : '▴'}
        </button>
      </div>
      <LogRenderer ref={scrollRef} logs={logs as LogRendererEntry[]} />
    </div>
  );
}
