import type { SocketLogItem } from '../types/tracking';

type EventLogProps = {
  logs: SocketLogItem[];
};

const levelClass: Record<SocketLogItem['level'], string> = {
  info: 'text-slate-700 bg-slate-100',
  success: 'text-emerald-700 bg-emerald-100',
  warning: 'text-amber-700 bg-amber-100',
  error: 'text-rose-700 bg-rose-100',
};

export const EventLog = ({ logs }: EventLogProps) => {
  return (
    <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h3 className="mb-3 text-sm font-semibold text-slate-700">Event Logs</h3>
      <div className="max-h-64 space-y-2 overflow-auto pr-1">
        {logs.length === 0 ? (
          <p className="text-sm text-slate-500">No logs yet.</p>
        ) : (
          logs.map((log) => (
            <div key={log.id} className="rounded-lg border border-slate-100 p-2">
              <div className="mb-1 flex items-center justify-between gap-2">
                <span className={`rounded px-2 py-0.5 text-xs font-medium ${levelClass[log.level]}`}>
                  {log.level.toUpperCase()}
                </span>
                <span className="text-xs text-slate-400">{log.timestamp}</span>
              </div>
              <p className="text-sm text-slate-700">{log.message}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
};