/* global React, Crumbs */
/* ============================================================================
   sections/skills.jsx — the "skills.md" section.
   ----------------------------------------------------------------------------
   Skills grouped by area (data.skills). Each group renders as a heading plus a
   row of small badges. Items are listed most-reached-for first.
   ============================================================================ */
function ViewSkills({ data }) {
  return (
    <>
      <Crumbs parts={["~", "portfolio", "skills.md"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Skills</h1>
      <div className="rm-prose">
        <p style={{ color: "var(--muted)" }}>
          A list. The ones near the top of each group are the ones I'd reach for first.
        </p>
        {data.skills.map((g) => (
          <React.Fragment key={g.group}>
            <h3 className="rm-h3"><span className="hash">###</span>{g.group}</h3>
            <div className="rm-badges">{g.items.map((x) => <span key={x}>{x}</span>)}</div>
          </React.Fragment>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { ViewSkills });