import * as React from "react";
import { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";

// Shown during a live game while an earlier position is on the board.
const ReviewBanner: FunctionComponent<{
    moveNumber: number,
    isYourTurn: boolean,
    onBackToLive: () => void,
}> = ({ moveNumber, isYourTurn, onBackToLive }) => {
    const { t } = useTranslation();
    return (
        <div className="review" role="status">
            <span>
                {t("ViewingMove", { number: moveNumber })}
                {isYourTurn && <strong>{` · ${t("YourTurn")}`}</strong>}
            </span>
            <button className="btn pri" onClick={onBackToLive}>{t("BackToLive")}</button>
        </div>
    );
};

export default ReviewBanner;