export default function StatsCard({ title, value, subtitle, color = 'blue', icon }) {
  const colors = {
    blue: 'from-accent/20 to-transparent border-accent/30 text-accent',
    green: 'from-emerald-500/20 to-transparent border-emerald-500/30 text-emerald-400',
    red: 'from-red-500/20 to-transparent border-red-500/30 text-red-400',
    amber: 'from-amber-500/20 to-transparent border-amber-500/30 text-amber-400',
  };

  return (
    <div className={`card bg-gradient-to-br ${colors[color]} border`}>
      <div className="flex items-start justify-between">
        <div>
          <p className="text-gray-400 text-sm mb-1">{title}</p>
          <p className="text-2xl font-bold">{typeof value === 'number' ? value.toLocaleString('fa-IR') : value}</p>
          {subtitle && <p className="text-xs text-gray-500 mt-1">{subtitle}</p>}
        </div>
        {icon && <span className="text-2xl opacity-80">{icon}</span>}
      </div>
    </div>
  );
}
