import './GameSelector.css';
import React from 'react';
import { useLocation, matchPath } from "react-router";

import { AppData } from "../../context/data"
import Proposal from './GameSelector/GameProposal';

export default function Game() {
  const [data] = React.useContext(AppData)

  const { pathname } = useLocation();
  const isProposalPath = matchPath("/game/proposal/*", pathname);
  const isActivelPath = matchPath("/game/active/*", pathname);
  const isArchivePath = matchPath("/game/archive/*", pathname);

  if (!data.games)
    return <div>Loading..</div>

  return (
    <div className='game-selector'>
      {isProposalPath && <Proposal games={data.games} />}
      {isActivelPath  && <div>TBD #1</div>}
      {isArchivePath  && <div>TBD #2</div>}
    </div>
  )
}