import { IonIcon } from '@ionic/react';
import styles from './SkillsCard.module.scss';

interface OwnProps {
    icon: string;
    name: string;
    isHighlighted?: boolean;
    toggleSkills: (skill: string) => void;

}

const SkillsCard: React.FC<OwnProps> = (props) => {
    return (
        <section className={styles.skill + ' ' + (props.isHighlighted ? styles.isHighlighted : "")} onClick={() => props.toggleSkills(props.name)}>
            <img src={props.icon} alt={props.name} />
            <div className={styles.name}>{props.name}</div>
        </section>
    )
}

export default SkillsCard;