import { Icon } from '../../Atoms/Icon/Icon';
import { Typography } from '../../Atoms/Typography/Typography';

export const StatCard = ({
  title,
  value,
  change,
  changeType = 'neutral',
  icon,
  iconColor = 'blue',
  className = '',
  ...props
}) => {
  const iconColorClasses = {
    blue: 'bg-blue-100 text-blue-600',
    green: 'bg-green-100 text-green-600',
    yellow: 'bg-yellow-100 text-yellow-600',
    red: 'bg-red-100 text-red-600',
    purple: 'bg-purple-100 text-purple-600',
  };

  const changeTypeClasses = {
    positive: 'text-green-600',
    negative: 'text-red-600',
    neutral: 'text-gray-600',
  };

  return (
    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`} {...props}>
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <Typography variant="body2" className="text-gray-600 mb-1">
            {title}
          </Typography>
          <Typography variant="h3" className="text-gray-900 mb-2">
            {value}
          </Typography>
          {change && (
            <div className={`flex items-center text-sm ${changeTypeClasses[changeType]}`}>
              <span>{change}</span>
            </div>
          )}
        </div>
        {icon && (
          <div className={`p-3 rounded-lg ${iconColorClasses[iconColor]}`}>
            <Icon name={icon} className="h-6 w-6" />
          </div>
        )}
      </div>
    </div>
  );
};

export default StatCard;

