import styled from "styled-components";
import { useTheme } from "../style/themes";
import { calculateAge } from "../utils/math";

import { asCardStack } from "../components/card-stack";

const About: React.FC = () => {
    const { years, months, days } = calculateAge(new Date(2007, 6, 25));
    const { theme, toggleTheme } = useTheme();

    return <>
        <Heading>Hello.</Heading>
        <p>My name is Franek. I'm {years} years, {months} months and {days} days old.</p>
        {asCardStack([
            {
                content: `switch theme to ${theme.type === "light" ? "dark" : "light"}`,
                icon: "/icons/" + (theme.type === "light" ? "moon" : "sun") + ".svg",
                primary: theme.type === "light",
                onClick: toggleTheme
            }
        ])}

        <h2>Some facts about me</h2>
        {asCardStack([
            "introvert",
            "IT enthusiast",
            "automotive enthusiast"
        ])}

        <h2>I can...</h2>
        {asCardStack([
            "play keyboard/organ",
            "mess with PCs from software to hardware",
            "code various apps and scripts"
        ])}

        <h2>My favourite music genres are:</h2>
        {asCardStack([
            "black metal",
            "doom metal",
            "DSBM",
            "nu metal",
            "hard rock"
        ])}

        <h2>I like these bands/singers:</h2>
        {asCardStack([
            "Mgła",
            "Behemoth",
            "Burzum",
            "Arkona",
            "Draconian",
            "Darkthrone",
            "Venom",
            "Slipknot",
            "None",
            "Lil Peep",
            "Alphaville",
            "MGMT",
            "ABBA",
            "Evanescence"
        ])}
        <p>yeah I know, I listen to a broad spectrum of music</p>
    </>;
}

const Heading = styled.h1`
    font-family: "Pacifico", serif;
`;

export default About;