import React from 'react';

export default function GameGrid({ grid, width, middle }) {
    return (
        <table id="actors">
            <tbody>
                {grid.map((row, rowIndex) => (
                    <tr key={rowIndex}>
                        {Array.from({ length: width + 1 }, (_, colIndex) => {
                            const start = middle - row.pos;
                            const charIndex = colIndex - start;
                            const name = row.actorName;
                            const isInRange = charIndex >= 0 && charIndex < name.length;
                            const isHighlighted = charIndex === row.pos;

                            return (
                                <td key={colIndex} style={isHighlighted ? { color: 'red' } : undefined}>
                                    {isInRange ? name[charIndex].toUpperCase() : ''}
                                </td>
                            );
                        })}
                    </tr>
                ))}
            </tbody>
        </table>
    );
}