1  import { cn } from '@/lib/utils'
 2  
 3  interface MetricCardProps {
 4    label: string
 5    value: string | number | null | undefined
 6    valueClass?: string
 7    className?: string
 8  }
 9  
10  export function MetricCard({ label, value, valueClass, className }: MetricCardProps) {
11    return (
12      <div
13        className={cn('rounded-lg p-4', className)}
14        style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-color)' }}
15      >
16        <div className="text-xs uppercase tracking-wider mb-1 font-medium" style={{ color: 'var(--text-secondary)' }}>
17          {label}
18        </div>
19        <div className={cn('text-3xl font-semibold', valueClass)} style={{ color: 'var(--text-primary)' }}>
20          {value ?? '--'}
21        </div>
22      </div>
23    )
24  }