import { LucideIcon } from 'lucide-react'

interface StatCardProps {
  title: string
  value: number | string
  icon: LucideIcon
  color?: string
  sub?: string
}

export default function StatCard({ title, value, icon: Icon, color = 'brand', sub }: StatCardProps) {
  const colorMap: Record<string, string> = {
    brand:  'text-brand  bg-brand/10',
    green:  'text-green-400  bg-green-400/10',
    red:    'text-red-400    bg-red-400/10',
    orange: 'text-orange-400 bg-orange-400/10',
    yellow: 'text-yellow-400 bg-yellow-400/10',
    accent: 'text-accent  bg-accent/10',
  }
  const cls = colorMap[color] || colorMap.brand

  return (
    <div className="bg-card border border-edge rounded-lg p-4 flex items-center gap-4">
      <div className={`p-3 rounded-lg ${cls}`}>
        <Icon size={20} />
      </div>
      <div>
        <p className="text-xs text-gray-400">{title}</p>
        <p className={`text-2xl font-bold ${cls.split(' ')[0]}`}>{value}</p>
        {sub && <p className="text-xs text-gray-500">{sub}</p>}
      </div>
    </div>
  )
}
