import React from 'react'
import { useState } from 'react'
const Dapier = () => {
    const [me, setMe] = useState(
        {
            name: 'Josue Alvarado',
            hobbies: ['coding 💻', 'drink coffee ☕', 'read documentation 📖'],
            tools: ['Windows', 'Linux', 'Adobe XD', 'Github', 'Git Bash', 'GitLab', 'Figma'],
            skills: ['compromise ', 'motivation ', 'adaptability ', 'Listening ']   
        }
    )
    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 Dapier