import React from 'react'

type StatisticsVariant = 'gray' | 'green' | 'orange' | 'blue' | 'purple' | 'red'

interface StatisticsCardProps {
  count: number
  label: string
  variant: StatisticsVariant
  className?: string
  icon?: React.ReactNode
}

const variantStyles: Record<StatisticsVariant, string> = {
  gray: 'bg-gray-50 border-gray-200 text-gray-700',
  green: 'bg-green-50 border-green-200 text-green-700',
  orange: 'bg-orange-50 border-orange-200 text-orange-700',
  blue: 'bg-blue-50 border-blue-200 text-blue-700',
  purple: 'bg-purple-50 border-purple-200 text-purple-700',
  red: 'bg-red-50 border-red-200 text-red-700'
}

export const StatisticsCard: React.FC<StatisticsCardProps> = ({
  count,
  label,
  variant,
  className = '',
  icon
}) => {
  return (
    <div className={`${variantStyles[variant]} border rounded-lg p-3 sm:p-4 text-center ${className}`}>
      {icon && (
        <div className="flex justify-center mb-2">
          {icon}
        </div>
      )}
      <div className="text-xl sm:text-2xl font-bold mb-1">
        {count}
      </div>
      <div className="text-sm sm:text-base font-medium">
        {label}
      </div>
    </div>
  )
}