import React, {useRef, useState} from "react";
import {Row} from "antd";
import {NumberParam, useQueryParam} from "use-query-params";

import {roomTime, useRoom, useRoomRunningChanged, useTick} 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 Player from "./Player";

const Centurion = () => {
    let roomRunning = useRoomRunningChanged()?.running || false;

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

    const lobbyContent = (
        <Lobby/>
    );

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

export default Centurion;