interface Props {
  label: string
  value: number
  sub?: string
  accent?: 'default' | 'green' | 'yellow' | 'red'
}

const ACCENT = {
  default: 'border-gray-200',
  green: 'border-green-400',
  yellow: 'border-yellow-400',
  red: 'border-red-400',
}

export function StatCard({ label, value, sub, accent = 'default' }: Props) {
  return (
    <div className={`bg-white rounded-xl shadow-sm p-5 border-t-4 ${ACCENT[accent]}`}>
      <p className="text-xs text-gray-500 uppercase tracking-wide font-medium">{label}</p>
      <p className="text-3xl font-bold text-gray-900 mt-1">{value}</p>
      {sub && <p className="text-xs text-gray-400 mt-1">{sub}</p>}
    </div>
  )
}