import { ReactNode } from 'react';

interface StatCardProps {
  label: string;
  value: number | string;
  bgColor: string;
  textColor: string;
  testId?: string;
  children?: ReactNode;
  onClick?: (e: React.MouseEvent) => void;
}

export function StatCard({
  label,
  value,
  bgColor,
  textColor,
  testId = 'stat-card',
  children,
  onClick
}: StatCardProps) {
  return (
    <div 
      className={`${bgColor} rounded-lg p-2 sm:p-3 ${onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`}
      data-testid={testId}
      onClick={onClick}
    >
      <p 
        className="text-xs text-gray-600 mb-1 leading-tight"
        data-testid={`${testId}-label`}
      >
        {label}
      </p>
      <p 
        className={`text-lg sm:text-xl font-bold ${textColor}`}
        data-testid={`${testId}-value`}
      >
        {value}
      </p>
      {children}
    </div>
  );
}

