import type { LucideIcon } from 'lucide-react'

interface MetricCardProps {
  icon: LucideIcon
  label: string
  value: string
  delta?: string
  hint?: string
  color: string
}

export function MetricCard({ icon: Icon, label, value, delta, hint, color }: MetricCardProps) {
  return (
    <div className="metric">
      <div className={`metric-icon ${color}`}>
        <Icon size={21} />
      </div>
      <div>
        <span>{label}</span>
        <strong>{value}</strong>
        <small className={hint ? 'warn' : ''}>{delta ?? hint}</small>
      </div>
    </div>
  )
}