import propTypes from 'prop-types';
import SkillRender from './SkillRender';


const SkillsList = ({skillData, skill_names}) => {
  return (
    <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3'>
            {skillData.map((skillLevel) => {
              const skill = skill_names.find((s) => s.id === parseInt(skillLevel.skill_id));
              return skill ? (
                <SkillRender key={skill.id} skill={skill.skill_name} level={skillLevel.skill_level} />
              ) : null;

            })}
    </div>
  );
};
SkillsList.propTypes = {
  skillData: propTypes.array,
  skill_names: propTypes.array,
};

export default SkillsList;