import * as React from "react";
import { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
import { Theme } from "@mancala/core";
import AppHeader from "../components/headerbar/AppHeader";
import PageContainer from "../components/PageContainer";
import RulesView from "../components/rules/RulesView";
import { Context } from "../context/context";

// How to play: every rule with an example (docs/specs/tutorial, R1).
const RulesPage: FunctionComponent<{ context: Context, theme: Theme }> = ({ context }) => {
    const { t } = useTranslation();
    return (
        <PageContainer>
            <AppHeader context={context} />
            <main className="wrap rules-page">
                <h1>{t("HowToPlay")}</h1>
                <RulesView />
            </main>
            <style jsx>{`
                .rules-page {
                    max-width: 760px;
                    width: 100%;
                    box-sizing: border-box;
                    align-self: center;
                }
                h1 {
                    margin: 0;
                    font-size: 30px;
                    letter-spacing: -.02em;
                }
            `}</style>
        </PageContainer>
    );
};

export default RulesPage;