---
interface Props {
  icon: string;
  label: string;
  value: string | number;
  color?: 'gold' | 'green' | 'blue' | 'red';
}

const { icon, label, value, color = 'gold' } = Astro.props;

const colorClasses = {
  gold: 'text-gold-500',
  green: 'text-green-400',
  blue: 'text-blue-400',
  red: 'text-red-400'
};
---

<div class="bg-titanium border border-edge-normal rounded-xl p-6 hover:border-gold-500/30 transition-colors">
  <div class="text-4xl mb-3">{icon}</div>
  <div class={`text-3xl font-bold ${colorClasses[color]}`}>{value}</div>
  <div class="text-gray-400 text-sm mt-1">{label}</div>
</div>