export interface CombatLogEntry {
  id: string
  tick: number
  message: string
  type: 'combat' | 'event' | 'system'
}

interface EngagementLogProps {
  logs?: CombatLogEntry[]
}

export function EngagementLog({ logs }: EngagementLogProps) {
  // Default mock logs for display
  const defaultLogs: CombatLogEntry[] = [
    {
      id: '1',
      tick: 42,
      message: '◆ Starfleet Command fires — HIT — 4.2% shield damage',
      type: 'combat',
    },
    {
      id: '2',
      tick: 42,
      message: '█ Borg Collective fires — MISS — Evasion successful',
      type: 'combat',
    },
    {
      id: '3',
      tick: 38,
      message:
        '⚡ EVENT: Borg Adaptation active — Incoming damage multiplier ×0.5',
      type: 'event',
    },
    {
      id: '4',
      tick: 35,
      message: '◆ Starfleet Command fires — CRIT — 12.6% shield damage',
      type: 'combat',
    },
    {
      id: '5',
      tick: 31,
      message:
        '🌀 EVENT: Debris Impact — Borg Collective shields reduced by 12%',
      type: 'event',
    },
    {
      id: '6',
      tick: 28,
      message: '█ Borg Collective fires — HIT — 6.1% shield damage',
      type: 'combat',
    },
  ]

  const displayLogs = logs || defaultLogs

  const logColor = {
    combat: 'text-slate-400',
    event: 'text-amber-400',
    system: 'text-sky-400',
  }

  return (
    <div className="border border-slate-900 bg-slate-950/20 p-2 font-mono text-xs select-none space-y-1 w-full max-h-[160px] overflow-y-auto pr-1">
      {displayLogs.map((log) => (
        <div
          key={log.id}
          className="flex gap-2 items-start leading-relaxed text-[11px]"
        >
          <span className="text-slate-600 font-bold shrink-0">
            [T{log.tick}]
          </span>
          <span className={`${logColor[log.type]}`}>{log.message}</span>
        </div>
      ))}
    </div>
  )
}
