interface StatCardProps {
  label: string;
  value: string | number;
  icon?: string;
  color?: 'brand' | 'green' | 'yellow' | 'red';
}

const colors = {
  brand:  'bg-[#EAE4D9] text-[#B7895A]',
  green:  'bg-green-50  text-green-600',
  yellow: 'bg-yellow-50 text-yellow-600',
  red:    'bg-red-50    text-red-600',
};

export default function StatCard({ label, value, icon, color = 'brand' }: StatCardProps) {
  return (
    <div className="bg-white rounded-xl border border-[#EAE4D9] p-5 flex items-center gap-4">
      {icon && (
        <div className={`w-11 h-11 rounded-lg flex items-center justify-center text-xl ${colors[color]}`}>
          {icon}
        </div>
      )}
      <div>
        <p className="text-sm text-[#0E0F12]/50">{label}</p>
        <p className="text-2xl font-semibold text-[#0E0F12]">{value}</p>
      </div>
    </div>
  );
}