export default function StatCard({ icon: Icon, label, value, subtitle, color = 'brand-primary', trend }) {
  const accentMap = {
    'brand-primary': 'accent-primary',
    'brand-secondary': 'accent-secondary',
    'brand-tertiary': 'accent-tertiary',
    'brand-quaternary': 'accent-quaternary',
  }

  const iconBgMap = {
    'brand-primary': 'bg-indigo-50 text-indigo-600 shadow-lg shadow-indigo-500/20',
    'brand-secondary': 'bg-pink-50 text-pink-600 shadow-lg shadow-pink-500/20',
    'brand-tertiary': 'bg-amber-50 text-amber-600 shadow-lg shadow-amber-500/20',
    'brand-quaternary': 'bg-emerald-50 text-emerald-600 shadow-lg shadow-emerald-500/20',
  }

  const accentClass = accentMap[color] || 'accent-primary'

  return (
    <div className={`stat-card-premium ${accentClass} bg-white rounded-xl border border-border p-5 card-hover`}>
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm font-medium text-text-tertiary">{label}</p>
          <p className="text-3xl font-bold text-text-primary mt-1">{value}</p>
          {subtitle && (
            <p className="text-xs text-text-tertiary mt-1">{subtitle}</p>
          )}
        </div>
        <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${iconBgMap[color] || iconBgMap['brand-primary']}`}>
          <Icon className="w-5 h-5" />
        </div>
      </div>
      {trend && (
        <div className="mt-3 pt-3 border-t border-border-light">
          <div className="flex items-center gap-1">
            <span className={`text-xs font-medium ${trend > 0 ? 'text-emerald-600' : 'text-red-500'}`}>
              {trend > 0 ? '+' : ''}{trend}%
            </span>
            <span className="text-xs text-text-tertiary">vs last month</span>
          </div>
        </div>
      )}
    </div>
  )
}