export const percentageTextClass = (percentage: number | null): string => {
  if (percentage === null) {
    return 'text-slate-400';
  }

  if (percentage >= 95) {
    return 'text-emerald-500';
  }

  if (percentage >= 90) {
    return 'text-emerald-400';
  }

  if (percentage >= 85) {
    return 'text-amber-400';
  }

  if (percentage >= 80) {
    return 'text-amber-500';
  }

  return 'text-red-500';
};

export const percentageBackgroundClass = (percentage: number | null): string => {
  if (percentage === null) {
    return 'bg-slate-500/10';
  }

  if (percentage >= 90) {
    return 'bg-emerald-500/10';
  }

  if (percentage >= 80) {
    return 'bg-amber-500/10';
  }

  return 'bg-red-500/10';
};

export const percentageBorderClass = (percentage: number | null): string => {
  if (percentage === null) {
    return 'border-slate-500/20';
  }

  if (percentage >= 90) {
    return 'border-emerald-500/20';
  }

  if (percentage >= 80) {
    return 'border-amber-500/20';
  }

  return 'border-red-500/20';
};
