import React from "react";
import { useState } from "react";

const Alex = () => {
  const [me, setMe] = useState({
    name: "Alexandro Espino",
    hobbies: ["Coding 💻", "Drink coffee ☕", "Learn 📖", "Videogames 🕹"],
    tools: ["Windows 🔟", "Linux 🧑‍💻", "Github", "Git Bash", "Figma ⚜️"],
    skills: ["Compromise ", "Motivation ", "Team work ", "Fast learner"],
  });
  console.log(me);
  return (
    <div>
      <h1>Hi im {me.name}</h1>
      <span>I usually do in my days:</span>
      <p>{me.hobbies}</p>
      <h3>What tools i use</h3>
      <ul>
        {me.tools.map((item, i) => (
          <li key={i}>
            <span>{item}</span>
          </li>
        ))}
      </ul>
      <h3>My skills</h3>
      <ul>
        {me.skills.map((item, i) => (
          <li key={i}>
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Alex;