1// The art critic's six criteria for one verdict (critic.mjs): a bar per
2// criterion, out of 5, with the step Jev's score lands on. Shown over a
3// card's cover on hover, in the song's spec, and by "is it art?".
4import { CRITERIA, levelText } from './critic.mjs';
5
6import { themeColor as ACCENT } from './site.mjs';
7
8export function ArtBreakdown({ criteria, compact = false }) {
9  if (!criteria) return null;
10  return (
11    <div className={compact ? 'space-y-0.5' : 'space-y-1'}>
12      {Object.entries(CRITERIA).map(([key, c]) => {
13        const score = criteria[key];
14        if (typeof score !== 'number') return null;
15        return (
16          <div key={key} title={`${c.label}: ${c.judges}. ${levelText(key, score)}`}>
17            <div className="flex items-center gap-2">
18              <span className={compact ? 'w-20 shrink-0' : 'w-24 shrink-0'}>{c.label}</span>
19              <span className="grow h-1.5 bg-white/20 rounded">
20                <span className="block h-1.5 rounded" style={{ width: `${(score / 5) * 100}%`, background: ACCENT }} />
21              </span>
22              <span className="w-8 text-right">{score.toFixed(1)}</span>
23            </div>
24            {!compact && <div className="text-xs opacity-70 pl-[6.5rem]">{c.levels[Math.round(score)]}</div>}
25          </div>
26        );
27      })}
28    </div>
29  );
30}