import type { LucideIcon } from 'lucide-react'

interface SummaryCardProps {
  title: string
  value: string | number
  icon: LucideIcon
  color: 'emerald' | 'amber' | 'sky' | 'violet'
}

const colorMap = {
  emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', text: 'text-emerald-400', icon: 'text-emerald-400' },
  amber:   { bg: 'bg-amber-500/10',  border: 'border-amber-500/20',  text: 'text-amber-400',  icon: 'text-amber-400' },
  sky:     { bg: 'bg-sky-500/10',    border: 'border-sky-500/20',    text: 'text-sky-400',    icon: 'text-sky-400' },
  violet:  { bg: 'bg-violet-500/10', border: 'border-violet-500/20', text: 'text-violet-400', icon: 'text-violet-400' },
}

export default function SummaryCard({ title, value, icon: Icon, color }: SummaryCardProps) {
  const c = colorMap[color]

  return (
    <div className={`rounded-xl border ${c.border} ${c.bg} p-5 flex items-start justify-between`}>
      <div>
        <p className="text-sm font-medium text-slate-400 mb-1">{title}</p>
        <p className={`text-3xl font-bold ${c.text}`}>{value}</p>
      </div>
      <div className={`p-2 rounded-lg ${c.bg}`}>
        <Icon size={24} className={c.icon} />
      </div>
    </div>
  )
}