mancala/apps/frontend/src/components/history/ReviewBanner.tsx

import * as React from "react";
import { FunctionComponent } from "react";
import { getColorByBrightness } from "@mancala/core";
import { useTranslation } from "react-i18next";
import { Context } from "../../context/context";
import Button from "../Button";

// Shown during a live game while an earlier position is on the board.
const ReviewBanner: FunctionComponent<{
    context: Context,
    moveNumber: number,
    isYourTurn: boolean,
    onBackToLive: () => void,
}> = ({ context, moveNumber, isYourTurn, onBackToLive }) => {
    const { t } = useTranslation();
    const theme = context.themeManager.theme;
    const background = isYourTurn ? theme.playerTurnColor : theme.boardColor;
    const textColor = getColorByBrightness(background, theme.textColor, theme.textLightColor);
    return (
        <div className="review-banner" style={{ background, color: textColor }}>
            <span>
                {`⟲ ${t("ViewingMove", { number: moveNumber })}`}
                {isYourTurn && <strong>{` · ${t("YourTurn")}`}</strong>}
            </span>
            <Button context={context} color={theme.pitColor} text={`${t("BackToLive")} ▶|`} onClick={onBackToLive} />
            <style jsx>{`
                .review-banner {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 12px;
                    width: calc(100% - 32px);
                    max-width: 640px;
                    margin: 0 16px 8px;
                    padding: 4px 8px 4px 16px;
                    border-radius: 30px;
                    box-sizing: border-box;
                    transition: background-color 0.5s;
                }
            `}</style>
        </div>
    );
};

export default ReviewBanner;