import React, { ReactNode } from 'react';
import { Card } from './Card';
import { Text } from './Text';

interface StatCardProps {
  label: string;
  value: string | number;
  icon?: ReactNode;
  variant?: 'blue' | 'purple' | 'green' | 'orange';
  className?: string;
}

export function StatCard({ 
  label, 
  value, 
  icon,
  variant = 'blue',
  className = ''
}: StatCardProps) {
  const variantClasses = {
    blue: 'bg-gradient-to-br from-blue-900/20 to-blue-700/10 border-blue-500/30',
    purple: 'bg-gradient-to-br from-purple-900/20 to-purple-700/10 border-purple-500/30',
    green: 'bg-gradient-to-br from-green-900/20 to-green-700/10 border-green-500/30',
    orange: 'bg-gradient-to-br from-orange-900/20 to-orange-700/10 border-orange-500/30'
  };
  
  const iconColorClasses = {
    blue: 'text-blue-400',
    purple: 'text-purple-400',
    green: 'text-green-400',
    orange: 'text-orange-400'
  };
  
  return (
    <Card className={`${variantClasses[variant]} ${className}`}>
      <div className="flex items-center justify-between">
        <div>
          <Text size="sm" color="text-gray-400" className="mb-1">
            {label}
          </Text>
          <Text size="3xl" weight="bold" color="text-white">
            {value}
          </Text>
        </div>
        {icon && (
          <div className={iconColorClasses[variant]}>
            {icon}
          </div>
        )}
      </div>
    </Card>
  );
}