interface StatCardProps {
  label: string
  value: number
  color?: 'slate' | 'blue' | 'green' | 'yellow' | 'red' | 'orange'
  highlight?: boolean
}

const colorClasses: Record<string, string> = {
  slate: 'text-slate-900',
  blue: 'text-blue-600',
  green: 'text-green-600',
  yellow: 'text-yellow-600',
  red: 'text-red-600',
  orange: 'text-orange-600',
}

export function StatCard({
  label,
  value,
  color = 'slate',
  highlight = false
}: StatCardProps) {
  return (
    <div className={`bg-white rounded-lg shadow p-4 ${highlight ? 'ring-2 ring-red-200' : ''}`}>
      <p className="text-xs text-slate-500 uppercase tracking-wider mb-1">{label}</p>
      <p className={`text-2xl font-bold ${colorClasses[color]}`}>{value}</p>
    </div>
  )
}