import withPage from "@/base/withPage"
import { useHistory } from "react-router-dom"
import styled from "styled-components"
import ReactMarkdown from "react-markdown"
import MdText from "./index.md?raw"

const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: #bf4f74;
`

const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`

export default withPage(function Project({ children }) {
    const router = useHistory()
    function toChild() {
        router.push("/project/child")
    }
    return (
        <div className="container">
            <Wrapper>
                <Title>HOME</Title>
            </Wrapper>
            <ReactMarkdown>{MdText}</ReactMarkdown>
            <div>
                <div onClick={toChild} style={{ height: "200px" }}>
                    vaas
                </div>
                {children}
            </div>
        </div>
    )
})