import React from "react";
import useTitle from "../../utils/hooks/TitleHook";
import Card from "../components/Card";

const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;

const MainLobby = () => {

    useTitle('MauLobby');

    const handleCreateRoom = () => {
        fetch(ROOM_URL, {
            method: 'POST',
        }).then(r => r.json()).then(data => {
            window.location.href = `/room/${data}`;
        });
    }

    const gotoRooms = () => {
        window.location.href = '/rooms';
    }

    return (
        <div className={"main-lobby"}>
            <h1 className={"main-lobby__title mau"}>MauMau</h1>
            <div className={"main-lobby__container"}>
                <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
                    <h2 className={"mau"}>Host Game</h2>
                    <Card cardString={'SPADES ACE'} isClickable/>
                </div>
                <div className={"main-lobby__container-button clickable"} onClick={gotoRooms}>
                    <h2 className={"mau"}>Join Game</h2>
                    <Card cardString={'SPADES ACE'} isHidden isClickable/>
                </div>
            </div>
        </div>
    );
}

export default MainLobby;
