import React from 'react';
import GameRow from './GameRow';

export default function GameGrid({ grid, width, middle }) {
    return (
        <table id="actors">
            <tbody>
                {grid.map((row, rowIndex) => {
                    if (row.separator !== undefined) {
                        return (
                            <tr key={rowIndex} className="separator-row">
                                <td />
                                {Array.from({ length: middle }, (_, i) => (
                                    <td key={i} />
                                ))}
                                <td className="letter-static separator-char">
                                    {row.separator === ' ' ? '' : row.separator}
                                </td>
                                {Array.from({ length: width - middle }, (_, i) => (
                                    <td key={middle + 1 + i} />
                                ))}
                            </tr>
                        );
                    }

                    return (
                        <GameRow
                            key={rowIndex}
                            actorName={row.actorName}
                            pos={row.pos}
                            colStart={middle - row.pos}
                            totalWidth={width}
                        />
                    );
                })}
            </tbody>
        </table>
    );
}