import { Card } from '@astryxdesign/core'
import type { ForensicsTile } from './forensics-types'
import { formatDurationMs } from './format'

export interface KpiTileProps {
  tile: ForensicsTile
}

function formatValue(tile: ForensicsTile): string {
  if (tile.key.endsWith('Ms')) return formatDurationMs(tile.value)
  return tile.value.toLocaleString()
}

/** `.kpi` — one run-forensics tile from the `forensics:<runId>` panel's `tiles[]`. */
export function KpiTile({ tile }: KpiTileProps) {
  return (
    <Card className="min-w-0">
      <div className="text-2xl font-bold tracking-[-0.01em] tabular-nums">{formatValue(tile)}</div>
      <div className="mt-0.5 text-sm text-fg-muted">{tile.label}</div>
    </Card>
  )
}