import React, { useEffect, forwardRef, useImperativeHandle } from "react";
import PropTypes from "prop-types";

const AboutMe = forwardRef(({ newSkills }, ref) => {
  const name = "Matheus Nascimento Cavallini";
  const mainPosition = "Full-Stack Developer";
  const primarySkill = "React";
  const [skills, setSkills] = useState([
    "JavaScript",
    "TypeScript",
    "React",
    "React Native",
    "Next.js",
    "Storybook",
    "JEST",
    "Cypress",
    "Angular JS",
    "Angular 2+",
    "SASS",
    "Styled Components",
    "EmotionJS"
    "NodeJS",
    "Git",
    "PHP",
  ]);

  useImperativeHandle(ref, () => ({
    getSkills() {
      return skills;
    },
  }));

  useEffect(() => {
    if (newSkills.length) {
      setSkills(...new Set([...skills, newSkills]));
    }
  }, [newSkills]);

  return (
    <section>
      <h1>About me!</h1>
      <p>{`Hi, my name is ${name}, I'm a ${mainPosition} and my primary skill is ${primarySkill}.`}</p>
      <h3>Some skills:</h3>
      <ul>
        {skills.map((lng) => (
          <li>{lng}</li>
        ))}
      </ul>
    </section>
  );
});

AboutMe.propTypes = {
  newSkills: PropTypes.array,
};

export default AboutMe;