content: import React from 'react';
  import PropTypes from 'prop-types';
  
  const Skills = ({ skills }) => {
    const mappedSkills = skills
      .sort(function(a, b) {
        if (a.level === b.level)
          return a.name.charCodeAt(0) - b.name.charCodeAt(0);
        else return b.level - a.level;
      })
      .map(function(item, index) {
        return (
          <li key={index}>
            <p>{item.name}</p>
            <span
              className={
                item.level === 2 ? 'green' : item.level === 1 ? 'yellow' : 'red'
              }
            />
          </li>
        );
      });
  
    return (
      <div id="skills" className="skills">
        <h2 className="title">Skills</h2>
        <ul>{mappedSkills}</ul>
        <footer>
          <p>
            Green (Up To Date): The developer feels confident with it. Even if you
            ask him something he doesn't know he should catch up soon.
          </p>
          <p>
            Yellow (Needs Refactoring): The developer feels somehow confident, but
            if you ask him something he doesn't know it may take longer than usual
            to catch up.
          </p>
          <p>
            Red (Under Development): The developer is trying to learn more about
            it. You should NOT asume the developer has any kind of competence
            related to this topic.
          </p>
        </footer>
      </div>
    );
  };
  
  Skills.propTypes = {
    skills: PropTypes.array.isRequired,
  };
  
  export default Skills;
  