export interface TickerEvent {
  id: string
  time: string
  message: string
  type: 'combat' | 'event' | 'system'
}

interface LiveTickerProps {
  events?: TickerEvent[]
}

export function LiveTicker({ events }: LiveTickerProps) {
  // Default mock ticker events
  const defaultEvents: TickerEvent[] = [
    {
      id: '1',
      time: '14:32',
      message: 'Borg Adaptation triggered — Damage reduced 50%',
      type: 'event',
    },
    {
      id: '2',
      time: '14:30',
      message: 'Critical Hit! Starfleet Command deals 3× damage',
      type: 'combat',
    },
    {
      id: '3',
      time: '14:28',
      message: 'Bajor Sector: Prophet Intervention — Markets SUSPENDED',
      type: 'event',
    },
    {
      id: '4',
      time: '14:25',
      message: 'New match scheduled: Klingons vs Romulans @ Narendra III',
      type: 'system',
    },
  ]

  const displayEvents = events || defaultEvents

  const typeColor = {
    combat: 'text-rose-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">
      {displayEvents.map((evt) => (
        <div key={evt.id} className="flex gap-2 items-start leading-relaxed">
          <span className="text-slate-600 font-bold shrink-0">
            [{evt.time}]
          </span>
          <span className={`${typeColor[evt.type]} font-semibold shrink-0`}>
            {evt.type.toUpperCase()}:
          </span>
          <span className="text-slate-400 truncate">{evt.message}</span>
        </div>
      ))}
    </div>
  )
}
