(function registerLighthouseScoreGrid(global) {
  'use strict';

  function toPercent(score) {
    if (score === null || score === undefined || Number.isNaN(Number(score))) return 'N/A';
    var numeric = Number(score);
    if (numeric > 1) numeric = numeric / 100;
    return Math.round(numeric * 100) + '%';
  }

  function classNameFor(score) {
    if (score === null || score === undefined || Number.isNaN(Number(score))) return 'score-card is-empty';
    var numeric = Number(score);
    if (numeric > 1) numeric = numeric / 100;
    if (numeric >= 0.9) return 'score-card is-good';
    if (numeric >= 0.5) return 'score-card is-warning';
    return 'score-card is-bad';
  }

  function LighthouseScoreGrid(props) {
    var React = global.React;
    var scores = props && props.scores || {};
    var items = [
      ['Overall', scores.overall],
      ['Performance', scores.performance],
      ['Accessibility', scores.accessibility],
      ['SEO', scores.seo],
      ['Best practices', scores.bestPractices]
    ];
    return React.createElement('div', { className: 'free-seo-score-grid' }, items.map(function mapItem(item) {
      return React.createElement('div', { key: item[0], className: classNameFor(item[1]) }, [
        React.createElement('span', { key: 'label' }, item[0]),
        React.createElement('strong', { key: 'score' }, toPercent(item[1]))
      ]);
    }));
  }

  global.FreeSeoLighthouseScoreGrid = LighthouseScoreGrid;
})(typeof window !== 'undefined' ? window : globalThis);