import { type GrafanaTheme2 } from '@grafana/data';

export function DiffCell({ value, theme }: { value: number | undefined; theme: GrafanaTheme2 }) {
  if (value === undefined) {
    return <span>-</span>;
  }

  let displayValue: string;
  let color: string;

  if (value === Infinity) {
    displayValue = 'new';
    color = theme.colors.success.text;
  } else if (value === -100) {
    displayValue = 'removed';
    color = theme.colors.error.text;
  } else {
    displayValue = `${value > 0 ? '+' : ''}${value.toFixed(2)}%`;
    color = value > 0 ? theme.colors.error.text : theme.colors.success.text;
  }

  return <span style={{ color, fontWeight: 'bold' }}>{displayValue}</span>;
}
