import React, { useState } from 'react';
import Cell from './Cell';

interface Props {
  width?: number;
  height?: number;
}

const Board = (props: Props) => {
  const width = props.width ?? 5;
  const height = props.height ?? 5;

  const initialGrid: boolean[][] = Array(height).fill(Array(width).fill(false));
  const [grid, setGrid] = useState<boolean[][]>(initialGrid);

  const toggle = (x: number, y: number) => {
    const newGrid = [...grid];
    const newRow = [...newGrid[y]];
    newRow[x] = !newGrid[y][x];
    newGrid[y] = newRow;
    setGrid(newGrid);
  };

  return (
    <div className="board">
      {grid.map((row, y) => (
        <div className="row" key={y}>
          {row.map((cell, x) => (
            <Cell x={x} y={y} alive={cell} toggle={toggle} key={x} />
          ))}
        </div>
      ))}
    </div>
  );
};

export default Board;