import React, { useContext } from 'react';
import Container from 'react-bootstrap/Container';
import { PersonContext } from './PersonContext';
import TagCloud from './TagCloud';

export default function Skills() {
    const person = useContext(PersonContext)
    return (
    <Container className='skills'>
        <h2>Skills</h2>
        <TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} />
        <TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} />
        <TagCloud title='Others' icon='bookmark' tags={person.skills.others} />
        <TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} />
      </Container>
    )
}