import * as React from "react";
import { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
import { CloseIcon } from "../Icons";
import RulesView from "./RulesView";

// The rules over the game page, so a player can look a rule up without leaving the game (R1.4).
const RulesPanel: FunctionComponent<{ onClose: () => void }> = ({ onClose }) => {
    const { t } = useTranslation();
    return (
        <div className="rpanel-back" onClick={onClose}>
            <aside className="rpanel" role="dialog" aria-label={t("HowToPlay")} onClick={(event) => event.stopPropagation()}>
                <div className="rhead">
                    <h1>{t("HowToPlay")}</h1>
                    <button className="btn icon ghost" aria-label={t("Close")} onClick={onClose}><CloseIcon /></button>
                </div>
                <RulesView />
            </aside>
            <style jsx>{`
                .rpanel-back {
                    position: fixed;
                    inset: 0;
                    z-index: 50;
                    background: rgba(0, 0, 0, .45);
                    display: flex;
                    justify-content: flex-end;
                }
                .rpanel {
                    width: min(480px, 100%);
                    height: 100%;
                    overflow-y: auto;
                    box-sizing: border-box;
                    padding: 20px;
                    background: var(--bg);
                    box-shadow: -12px 0 30px rgba(0, 0, 0, .3);
                }
                .rhead {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 16px;
                }
                h1 {
                    margin: 0;
                    font-size: 24px;
                }
            `}</style>
        </div>
    );
};

export default RulesPanel;