import { MetadataList, MetadataListItem } from '@astryxdesign/core'

export type KvIntent = 'neutral' | 'ok' | 'warn' | 'err' | 'info'

export interface KvRow {
  label: string
  value: string
  intent?: KvIntent
}

export interface KvPanelProps {
  rows: KvRow[]
}

const INTENT_CLASS: Record<KvIntent, string> = {
  neutral: 'text-fg font-medium',
  ok: 'text-success font-medium',
  warn: 'text-warning font-medium',
  err: 'text-danger font-medium',
  info: 'text-accent font-medium',
}

/** `.kv` — a stack of label/value rows (Plans, CI & Runners, Hosts & Gates panels). */
export function KvPanel({ rows }: KvPanelProps) {
  return (
    <MetadataList orientation="horizontal" label={{ position: 'start' }}>
      {rows.map((row) => (
        <MetadataListItem key={row.label} label={row.label}>
          <b className={INTENT_CLASS[row.intent ?? 'neutral']}>{row.value}</b>
        </MetadataListItem>
      ))}
    </MetadataList>
  )
}