import React from "react";
import {Row} from "antd";

import {useRoomRunningAndReadyChanged} from "../lib/Connection";
import NextShot from "./NextShot";
import Feed from "./Feed";
import ShotsTaken from "./ShotsTaken";
import Lobby from "./Lobby";

import logo from "../img/via-logo.svg";
import haramlogo from "../img/harambee_logo.png";
import Player from "./Player";

const Centurion = () => {
    const room = useRoomRunningAndReadyChanged();
    const showFeed = (room?.running && room.readyToParticipate) || false;

    const feedContent = (
        <React.Fragment>
            <Row>
                <NextShot/>
                <Feed/>
                <ShotsTaken/>
            </Row>
            <Player/>
        </React.Fragment>
    );

    const lobbyContent = (
        <Lobby/>
    );

    return (
        <>
            <section className="content">
                {showFeed ? feedContent : lobbyContent}
            </section>
            <footer>
                <img src={haramlogo} className="haram-logo" alt="haramlogo"/>
                <img src={logo} className="via-logo" alt="logo"/>
            </footer>
        </>
    );
};

export default Centurion;