import { Users, Newspaper, Calendar, GraduationCap, type LucideIcon } from 'lucide-react'

interface Stat {
  label: string
  value: number
  icon: string
}

const ICON_MAP: Record<string, LucideIcon> = {
  '👥': Users,
  '📰': Newspaper,
  '📅': Calendar,
  '🎓': GraduationCap,
}

export function StatsCards({ stats }: { stats: Stat[] }) {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat) => {
        const Icon = ICON_MAP[stat.icon] ?? Users
        return (
          <div key={stat.label} className="stat-card flex flex-col gap-3">
            <div className="flex items-start justify-between">
              <div>
                <div className="text-4xl font-bold text-gray-900 leading-none">{stat.value}</div>
                <div className="text-xs text-gray-500 mt-2 uppercase tracking-wide font-medium">{stat.label}</div>
              </div>
              <Icon size={18} className="text-gray-300 flex-shrink-0 mt-0.5" />
            </div>
          </div>
        )
      })}
    </div>
  )
}