import { Bar } from '@/components/ui/primitives';
import { fmt } from '@/lib/format';
import { COMPONENT_LABEL, COMPONENT_ORDER, pressureColor } from '@/lib/pressure';
import type { ComponentScores } from '@/lib/types';

/** Static component score grid for scope pages. `null` = not attributable for this scope (shown, never faked). */
export function ComponentGrid({ components }: { components: ComponentScores }) {
  const ids = COMPONENT_ORDER.filter((c) => c in components);
  return (
    <dl className="grid grid-cols-3 gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-6">
      {ids.map((id) => {
        const v = components[id];
        return (
          <div key={id} className="bg-panel px-3 py-2.5">
            <dt className="label truncate">{COMPONENT_LABEL[id]}</dt>
            <dd className="num mt-0.5 text-[22px] leading-none" style={{ color: v == null ? 'var(--ink-3)' : pressureColor(v) }} title={v == null ? 'Not attributable for this scope' : undefined}>
              {v == null ? 'n/a' : fmt(v)}
            </dd>
            <Bar value={v} className="mt-2" />
          </div>
        );
      })}
    </dl>
  );
}