nuzlocke-tracker/frontend/src/components/StatCard.tsx

interface StatCardProps {
  label: string
  value: number
  total?: number | undefined
  color: string
}

const colorClasses: Record<string, string> = {
  blue: 'border-blue-500',
  green: 'border-green-500',
  red: 'border-red-500',
  purple: 'border-purple-500',
  amber: 'border-amber-500',
  gray: 'border-gray-500',
}

export function StatCard({ label, value, total, color }: StatCardProps) {
  return (
    <div
      className={`bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 ${colorClasses[color] ?? 'border-gray-500'}`}
    >
      <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
        {value}
        {total !== undefined && (
          <span className="text-sm font-normal text-gray-500 dark:text-gray-400"> / {total}</span>
        )}
      </div>
      <div className="text-sm text-gray-600 dark:text-gray-400">{label}</div>
    </div>
  )
}