const accentColors = {
  default: 'text-white',
  red: 'text-red-400',
  blue: 'text-blue-400',
  green: 'text-green-400',
  orange: 'text-orange-400',
  purple: 'text-purple-400',
}

export default function StatCard({ label, value, accent = 'default', sub }) {
  return (
    <div className="bg-gray-800/60 rounded-xl p-3 border border-gray-700/50">
      <p className="text-xs text-gray-500 mb-1">{label}</p>
      <p className={`text-lg font-semibold ${accentColors[accent]}`}>{value}</p>
      {sub && <p className="text-xs text-gray-600 mt-0.5">{sub}</p>}
    </div>
  )
}