import Cell from "./cell.tsx";
import styles from "./maze.module.css";
import {State} from "./state/state.ts";
import {ActionDispatch, JSX} from "react";
import {Action} from "./state/action.ts";

export default function Maze({state, dispatch}:
                             {
                                 state: State,
                                 dispatch: ActionDispatch<[Action]>
                             }) {
    if (!state.maze) {
        return <div>No valid maze.</div>
    }

    const maze: JSX.Element[] = [];
    for (let y = 0; y < state.maze.height; y++) {
        const row: JSX.Element[] = [];
        for (let x = 0; x < state.maze.width; x++) {
            row.push(<Cell key={`${x}x${y}`} x={x} y={y} state={state} dispatch={dispatch}/>)
        }
        maze.push(<div key={`r${y}`} className={styles.row}>{row}</div>);
    }
    return (
        <div className={styles.maze}>
            {maze}
        </div>
    );
}