<script setup lang="ts">
/**
 * ConsoleLine — one line in the RCON / server log stream.
 * Monospace, color-coded by level. Optional timestamp and actor (who).
 */
withDefaults(
  defineProps<{
    time?: string
    level?: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
    who?: string
  }>(),
  { level: 'info' },
)

const LABEL: Record<string, string> = {
  cmd: 'cmd',
  chat: 'chat',
  info: 'info',
  warn: 'warn',
  error: 'err',
  connect: 'join',
  kill: 'kill',
}
</script>

<template>
  <div :class="['cc-line', 'cc-line--' + level]">
    <span v-if="time" class="cc-line__time">{{ time }}</span>
    <span class="cc-line__tag">{{ LABEL[level ?? 'info'] ?? level }}</span>
    <span class="cc-line__msg">
      <span v-if="who" class="cc-line__who">{{ who }} </span>
      <slot />
    </span>
  </div>
</template>

<style>
.cc-line { display: flex; gap: 10px; padding: 2px 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; align-items: baseline; }
.cc-line:hover { background: var(--surface-hover); }
.cc-line__time { color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
.cc-line__tag { flex: none; text-transform: uppercase; font-weight: 600; font-size: 10px; letter-spacing: .05em; padding: 0 5px; border-radius: var(--radius-xs); height: 15px; display: inline-flex; align-items: center; }
.cc-line__msg { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; min-width: 0; }
.cc-line__who { color: var(--accent-text); }
.cc-line--cmd .cc-line__tag { background: var(--accent-soft); color: var(--accent-text); }
.cc-line--cmd .cc-line__msg { color: var(--text-primary); }
.cc-line--chat .cc-line__tag { background: var(--surface-active); color: var(--text-secondary); }
.cc-line--info .cc-line__tag { background: var(--status-info-soft); color: var(--status-info); }
.cc-line--warn .cc-line__tag { background: var(--status-warn-soft); color: var(--status-warn); }
.cc-line--warn .cc-line__msg { color: var(--status-warn); }
.cc-line--error .cc-line__tag { background: var(--status-offline-soft); color: var(--status-offline); }
.cc-line--error .cc-line__msg { color: var(--status-offline); }
.cc-line--connect .cc-line__tag { background: var(--status-online-soft); color: var(--status-online); }
.cc-line--kill .cc-line__tag { background: var(--status-wiping-soft); color: var(--status-wiping); }
</style>
