import type { Content } from '@/content';
import type { Profile } from '@/lib/scoring';

export function ProfileChart({ profile, content }: { profile: Profile; content: Content }) {
  return (
    <ol className="profile-chart" aria-label="Your archetype map, strongest first">
      {profile.scores.map((score) => {
        const archetype = content.archetypes[score.id];
        return (
          <li key={score.id} className={`pc-row is-${score.band}`}>
            <span className="pc-label">
              <span className="pc-dot" style={{ background: archetype.color }} aria-hidden="true" />
              {archetype.name}
            </span>
            <span className="pc-track" aria-hidden="true">
              <span
                className="pc-bar"
                style={{ width: `${Math.max(score.relative, 4)}%`, background: archetype.color }}
              />
            </span>
            <span className="pc-band">
              {content.bands[score.band].label}
              <span className="sr-only">, relative strength {score.relative} out of 100</span>
            </span>
          </li>
        );
      })}
    </ol>
  );
}

export function BandLegend({ content }: { content: Content }) {
  return (
    <ul className="band-legend">
      {Object.values(content.bands).map((band) => (
        <li key={band.label}>
          <strong>{band.label}:</strong> {band.description}
        </li>
      ))}
    </ul>
  );
}