interface StatCardProps {
  label: string;
  value: string | number;
  change?: string;
  changeType?: 'up' | 'down' | 'neutral';
  progress?: number;
  progressColor?: string;
}

export function StatCard({
  label,
  value,
  change,
  changeType = 'neutral',
  progress,
  progressColor = 'bg-warning',
}: StatCardProps) {
  return (
    <div className="card p-4">
      <div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-1.5">
        {label}
      </div>
      <div className="font-display text-[26px] font-bold text-text-primary mb-1">
        {value}
      </div>
      {change && (
        <div className={`text-[11px] ${
          changeType === 'up' ? 'text-danger' :
          changeType === 'down' ? 'text-success' : 'text-text-muted'
        }`}>
          {change}
        </div>
      )}
      {progress !== undefined && (
        <div className="h-[3px] bg-bg-page rounded mt-2.5 overflow-hidden">
          <div
            className={`h-full rounded ${progressColor}`}
            style={{ width: `${progress}%` }}
          />
        </div>
      )}
    </div>
  );
}