src/components/ui/RiskBadge.tsx

'use client'
import { cn } from '@/lib/utils'
import { ChurnRisk } from '@/lib/types'

const cfg: Record<ChurnRisk, { label: string; color: string; bg: string; dot: string }> = {
  critical: { label: 'CRITICAL', color: 'text-trading-down', bg: 'bg-trading-down/10', dot: 'bg-trading-down' },
  high: { label: 'HIGH', color: 'text-[#ff9500]', bg: 'bg-[#ff9500]/10', dot: 'bg-[#ff9500]' },
  medium: { label: 'MEDIUM', color: 'text-brand-yellow', bg: 'bg-brand-yellow/10', dot: 'bg-brand-yellow' },
  low: { label: 'LOW', color: 'text-trading-up', bg: 'bg-trading-up/10', dot: 'bg-trading-up' },
  safe: { label: 'SAFE', color: 'text-brand-turquoise', bg: 'bg-brand-turquoise/10', dot: 'bg-brand-turquoise' },
}

export function RiskBadge({ risk, size = 'md' }: { risk: ChurnRisk; size?: 'sm' | 'md' }) {
  const c = cfg[risk]
  return (
    <div className={cn('inline-flex items-center gap-1.5 rounded-pill', c.bg, size === 'sm' ? 'px-2 py-0.5' : 'px-3 py-1')}>
      <div className={cn('rounded-full', c.dot, size === 'sm' ? 'w-1.5 h-1.5' : 'w-2 h-2')} />
      <span className={cn('font-mono font-semibold', c.color, size === 'sm' ? 'text-[10px]' : 'text-caption')}>{c.label}</span>
    </div>
  )
}