let canvas: HTMLCanvasElement | null = null;

/**
 * How wide a string renders in a font, in CSS pixels, the way Google
 * measures titles (about 600px) and descriptions (about 920px). Zero where
 * there is no canvas to measure with.
 */
export const textWidth = (text: string, font: string): number => {
  if (typeof document === 'undefined') {
    return 0;
  }
  canvas = canvas ?? document.createElement('canvas');
  const context = canvas.getContext('2d');
  if (!context) {
    return 0;
  }
  context.font = font;
  return Math.round(context.measureText(text).width);
};

/** Google's result page fonts, for the pixel counters. */
export const SERP_FONTS = {
  title: '20px arial, sans-serif',
  description: '14px arial, sans-serif',
};

/** What Google shows before it cuts, as Rank Math counts it. */
export const SERP_WIDTHS = {
  title: 580,
  description: 920,
};