'use client'

import { GlassCard } from './GlassCard'

interface StatCardProps {
  label: string
  value: string | number
  icon: React.ReactNode
  color?: string
  delay?: number
  isDark?: boolean
}

export function StatCard({ label, value, icon, color = '#a78bfa', delay = 0, isDark = true }: StatCardProps) {
  return (
    <GlassCard size="sm" delay={delay} isDark={isDark}>
      <div className="flex items-center gap-4">
        <div
          className="w-12 h-12 rounded-2xl flex items-center justify-center"
          style={{ backgroundColor: `${color}20` }}
        >
          <span style={{ color }}>{icon}</span>
        </div>
        <div>
          <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{label}</p>
          <p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{value}</p>
        </div>
      </div>
    </GlassCard>
  )
}