import * as React from 'react';
import { FunctionComponent } from "react"
import { context } from '../context';
import { Game } from '../mancala';

const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string }> = ({ game, crashMessage, userKey }) => {
    if (crashMessage) {
        return (
            <h4>{
                context.texts.GameCrashed + " " + crashMessage
            }</h4>
        )
    }

    if (game) {
        if (game.state == "ended") {
            const whoWon = game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost
            return (
                <h4>{
                    context.texts.GameEnded + " " + whoWon
                }</h4>
            )
        } else {
            return (
                <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
            )
        }
    }

    return <h4></h4>
}

export default InfoPanel