function Skills({ skills }) {
  return (
    <div className="sk">
      {skills.map(c => (
        <div key={c.name} className="sk__row">
          <div className="sk__name">{c.name}</div>
          <div className="sk__items">
            {c.items.map(it => <span key={it} className="tl__tag">{it}</span>)}
          </div>
        </div>
      ))}
    </div>
  );
}

function Education({ edu }) {
  return (
    <article className="tl__item" style={{ paddingLeft: 0, paddingBottom: 0 }}>
      <div className="tl__head">
        <div>
          <h3 className="tl__role">{edu.role}</h3>
          <div className="tl__company">
            <strong>{edu.company}</strong>
            {edu.location && <span className="tl__muted"> · {edu.location}</span>}
          </div>
        </div>
        <div className="tl__dates">{edu.dateLabel}</div>
      </div>
      {edu.bullets && edu.bullets.length > 0 && (
        <ul className="tl__bullets">
          {edu.bullets.map((b, i) => <li key={i} className="tl__bullet">{b}</li>)}
        </ul>
      )}
    </article>
  );
}

window.Skills = Skills;
window.Education = Education;