interface StatsCardProps {
  title: string;
  value: string | number;
  change: number;
  unit?: string;
  colorScheme?: 'blue' | 'green' | 'red' | 'purple';
}

export default function StatsCard({ 
  title, 
  value, 
  change, 
  unit = '',
  colorScheme = 'blue'
}: StatsCardProps) {
  const isPositive = change >= 0;
  const hasPercentUnit = unit === '%';
  
  // Color mappings based on the colorScheme
  const gradientBg = {
    blue: 'bg-gradient-blue',
    green: 'bg-gradient-green',
    red: 'bg-gradient-red',
    purple: 'bg-gradient-purple',
  }[colorScheme];
  
  const accentColor = {
    blue: 'text-accent-blue',
    green: 'text-accent-green',
    red: 'text-accent-red',
    purple: 'text-accent-purple',
  }[colorScheme];
  
  return (
    <div className="bg-card-bg border border-card-border rounded-lg overflow-hidden">
      {/* Colorful top bar */}
      <div className={`h-1 ${gradientBg}`}></div>
      
      <div className="p-5">
        <h2 className="text-text-secondary text-sm font-medium mb-2">{title}</h2>
        
        <div className="flex flex-col">
          <div className="flex items-baseline">
            <p className={`text-3xl font-bold ${accentColor}`}>
              {value}
              {hasPercentUnit && <span className={accentColor}>%</span>}
            </p>
            
            <div className={`ml-3 px-2 py-0.5 rounded-md text-sm font-medium flex items-center ${
              isPositive ? 'text-accent-green' : 'text-accent-red'
            }`}>
              <span className={`inline-block w-2 h-2 rounded-full mr-1 ${
                isPositive ? 'bg-accent-green' : 'bg-accent-red'
              }`}></span>
              {isPositive ? '+' : ''}{change}%
            </div>
          </div>
          
          {/* Visual indicator for percentages */}
          {hasPercentUnit && (
            <div className="mt-3 w-full bg-progress-bg h-2 rounded-full overflow-hidden">
              <div 
                className={`${gradientBg} h-full rounded-full`}
                style={{ width: `${Math.min(Number(value), 100)}%` }}
              ></div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}