type Status = 'running' | 'stopped' | 'error' | 'pending' | 'creating' | 'active' | 'inactive' | 'failed' | string

const MAP: Record<string, { label: string; bg: string; color: string }> = {
  running:  { label: '실행중', bg: '#e8f5e9', color: '#2e7d32' },
  active:   { label: '활성',   bg: '#e8f5e9', color: '#2e7d32' },
  stopped:  { label: '중지',   bg: '#f5f5f5', color: '#757575' },
  inactive: { label: '비활성', bg: '#f5f5f5', color: '#757575' },
  error:    { label: '오류',   bg: '#ffebee', color: '#c62828' },
  failed:   { label: '실패',   bg: '#ffebee', color: '#c62828' },
  pending:  { label: '진행중', bg: '#fff8e1', color: '#e65100' },
  creating: { label: '생성중', bg: '#e3f2fd', color: '#1565c0' },
  unknown:  { label: '알수없음',bg: '#f5f5f5', color: '#9e9e9e' },
}

export function StatusBadge({ status }: { status: Status }) {
  const s = MAP[status] ?? MAP.unknown
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 8px', borderRadius: 20,
      background: s.bg, color: s.color,
      fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.color }} />
      {s.label}
    </span>
  )
}
