interface Props {
  label: string;
  value: string | number;
  change?: number;
  prefix?: string;
  suffix?: string;
}

export function MetricCard({ label, value, change, prefix = '', suffix = '' }: Props) {
  return (
    <div className="p-3">
      <div className="text-xs text-[var(--color-text-secondary)] mb-1">{label}</div>
      <div className="text-lg font-bold">
        {prefix}
        {typeof value === 'number' ? value.toLocaleString() : value}
        {suffix}
      </div>
      {change !== undefined && (
        <div
          className={`text-xs mt-0.5 ${
            change >= 0 ? 'text-[var(--color-green)]' : 'text-[var(--color-red)]'
          }`}
        >
          {change >= 0 ? '+' : ''}
          {change.toFixed(2)}%
        </div>
      )}
    </div>
  );
}
