import React, { useState, useEffect } from "react";
import { fetchGameState } from "../api/game.api";
import Board from "./board";

const Game = () => {
  const [isLoading, setLoading] = useState(false);
  const [cellWidth, setCellWidth] = useState(4);
  const [cells, setCells] = useState([
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
    { terrainType: 1 },
  ]);
  useEffect(() => {
    setLoading(true);
    fetchGameState("red", 1).then(console.log);
  });

  return <Board cellWidth={cellWidth} cells={cells} />;
};

export default Game;