/**
 * What I Know
 * @author Jackson Loeffler <code@jottocraft.com>
 */

import React, { useReducer } from "react";
import { Button, Container, Icon } from "shamrock-ux";

import SkillItem from "./SkillItem";
import type { Skill } from "~/types";

export default function WhatIKnow() {
    const [skills, addSkill] = useReducer(function (state: Skill[], newSkill: Skill): Skill[] {
        return [...state, newSkill];
    }, []);

    return (
        <Container>
            <div className="inline-block p-4 bg-ui-0 dark:bg-ui-10 rounded-xl shadow-lg space-y-8">
                <div className="flex flex-row items-center text-type-10 text-3xl space-x-4 font-semibold">
                    <Icon>💡</Icon>
                    <h1>What I know</h1>
                </div>
                {skills.map(skill => <SkillItem {...skill} />)}
                <br />
                <div>
                    <Button onClick={addSkill} icon="lightbulb">Learn skill</Button>
                </div>
            </div>
        </Container>
    );
}