import React from "react";
import PropTypes from "prop-types";
import SectionTitle from "./SectionTitle";

const Skill = ({ type, description, last }) => {
  return (
    <>
      <b>{type}:</b> {description}
      {!last && <br />}
    </>
  );
};

Skill.propTypes = {
  type: PropTypes.string.isRequired,
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
    .isRequired,
  last: PropTypes.bool
};

const Skills = ({ data }) => {
  const _skills = [...data.elements.sort((a, b) => a.id - b.id)];
  const last = _skills.pop();

  return (
    <section>
      <SectionTitle icon={data.icon} label={data.label} />
      <div className="justify-text">
        {_skills.map(skill => (
          <Skill key={`skill-${skill.id}`} {...skill} />
        ))}
        <Skill {...last} last={true} />
      </div>
    </section>
  );
};

Skills.propTypes = {
  data: PropTypes.shape({
    icon: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    elements: PropTypes.arrayOf(
      PropTypes.shape({
        type: PropTypes.string.isRequired,
        description: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
          .isRequired
      })
    ).isRequired
  }).isRequired
};

export default Skills;