import React from 'react';

import type { Grid, GridCell } from '@/types/grid';
import { Cell } from '@/components/grid/Cell';

interface GridProps {
    grid: Grid;
    onCellInteract?: (cell: GridCell) => void;
}

export const GridComponent: React.FC<GridProps> = ({
    grid,
    onCellInteract,
}) => {
    return (
        <div className='grid'>
            {grid.map((row, i) => (
                <div className='grid-row' key={i}>
                    {row.map((cell, j) => (
                        <Cell
                            key={j}
                            cell={cell}
                            onClick={() => onCellInteract?.(cell)}
                        />
                    ))}
                </div>
            ))}
        </div>
    );
};