import { LucideIcon } from 'lucide-react'

interface StatCardProps {
  label: string
  value: string | number
  icon?: LucideIcon
  hint?: string
  accent?: 'indigo' | 'green' | 'amber' | 'rose'
}

const ACCENTS = {
  indigo: 'text-indigo-400 bg-indigo-500/10 border-indigo-500/20',
  green: 'text-green-400 bg-green-500/10 border-green-500/20',
  amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
  rose: 'text-rose-400 bg-rose-500/10 border-rose-500/20',
}

export default function StatCard({ label, value, icon: Icon, hint, accent = 'indigo' }: StatCardProps) {
  return (
    <div className="bg-white/[0.04] border border-white/[0.06] rounded-2xl p-5">
      <div className="flex items-start justify-between mb-3">
        <span className="text-xs font-medium text-white/50 uppercase tracking-wider">{label}</span>
        {Icon && (
          <div className={`w-9 h-9 rounded-lg flex items-center justify-center border ${ACCENTS[accent]}`}>
            <Icon className="w-4 h-4" />
          </div>
        )}
      </div>
      <div className="text-3xl font-semibold text-white">{value}</div>
      {hint && <div className="text-xs text-white/40 mt-1">{hint}</div>}
    </div>
  )
}