interface MetricCardProps {
  label: string
  value: string | number
  sublabel?: string
  icon?: string
  accent?: string
  trend?: number
}

export function MetricCard({ label, value, sublabel, icon, accent = '#7c3aed', trend }: MetricCardProps) {
  return (
    <div className="glass-card p-3.5 transition-all hover:scale-[1.02] hover:glow-accent group">
      <div className="flex items-start justify-between mb-1.5">
        <span className="text-[11px] text-pal-muted font-medium uppercase tracking-wide">{label}</span>
        {icon && <span className="text-base opacity-60 group-hover:opacity-100 transition-opacity">{icon}</span>}
      </div>
      <div className="flex items-baseline gap-2">
        <span
          className="text-xl font-bold"
          style={{ color: accent }}
        >
          {value}
        </span>
        {trend !== undefined && (
          <span className={`text-xs ${trend >= 0 ? 'text-pal-green' : 'text-pal-red'}`}>
            {trend >= 0 ? '↑' : '↓'} {Math.abs(trend)}
          </span>
        )}
      </div>
      {sublabel && <span className="text-[10px] text-pal-muted mt-0.5 block">{sublabel}</span>}
    </div>
  )
}