import { cn } from '@/lib/utils'

interface StatCard {
  label: string
  value: string | number
  meta?: string
  gradient?: boolean
  color?: string
}

interface QuickStatsProps {
  stats: StatCard[]
}

export function QuickStats({ stats }: QuickStatsProps) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      {stats.map((stat, i) => (
        <div
          key={stat.label}
          className={cn('glass-card p-4 fade-in', i === 0 && 'active-glow')}
          style={{ animationDelay: `${50 + i * 30}ms` }}
        >
          <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
            {stat.label}
          </p>
          <p
            className={cn(
              'mt-1 font-heading text-2xl font-extrabold tracking-tight',
              stat.gradient && 'text-gradient-brand',
              stat.color
            )}
            style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}
          >
            {stat.value}
          </p>
          {stat.meta && (
            <p className="mt-0.5 text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{stat.meta}</p>
          )}
        </div>
      ))}
    </div>
  )
}
