/* global React, SKILLS, PROFILE, SectionHead, useInView */

const { useRef } = React;

function Skills() {
  const ref  = useRef(null);
  const seen = useInView(ref);

  return (
    <section id="skills">
      <SectionHead num="03 / 05" title="Skills" note="grouped" />
      <div ref={ref} className={`skills-grid ${seen ? "in" : ""}`}>
        {SKILLS.map((g) => (
          <div className="skill-block" key={g.h}>
            <h3>
              {g.h}
              <span>{String(g.count).padStart(2, "0")}</span>
            </h3>
            <ul>
              {g.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="skills-footer">
        <span>{PROFILE.school.toUpperCase()}</span>
        <span>· · ·</span>
        {/* <span>{(PROFILE.cert ?? "").toUpperCase()}</span> */}
      </div>
    </section>
  );
}

Object.assign(window, { Skills });