const ResponsiveGridLayout = WidthProvider(Responsive);

// Define a set of block sizes and their attributes
const BLOCK_SIZES = [
	{ id: 'photo', width: 2, height: 2, content: 'Photo' },
	{ id: 'contact', width: 2, height: 3, content: 'Contact Us' },
	{ id: 'logo', width: 1, height: 1, content: 'Logo' },
];

const App = () => {
	
	const [blocks, setBlocks] = useState([]);// Current blocks on the grid
	const [newBlockCount, setNewBlockCount] = useState(0);// Counter for new blocks added
	const [layout, setLayout] = useState([]);// Layout of blocks
	const [editingBlock, setEditingBlock] = useState(null);// Currently edited block
	
	// Constants defining grid dimensions
	const ROW_HEIGHT = 120;
	const GRID_COLS = 6;
	const GRID_ROWS = 8;
	
	/**
	* Calculate Maximum Blocks per Grid
	* Function to calculate max blocks based on current layout
	*/
	const calculateMaxBlocks = (blockList, newBlockWidth, newBlockHeight) => {
		
		// Create a grid to track occupied spaces
		const occupiedGrid = Array.from({ length: GRID_ROWS }, () => Array(GRID_COLS).fill(false));
		
		// Fill the grid with existing blocks
		blockList.forEach(block => {
			
			for (let dy = 0; dy < block.h; dy++) {
				for (let dx = 0; dx < block.w; dx++) {
					
					const gridY = block.y + dy;
					const gridX = block.x + dx;
					
					// Ensure we don't go out of bounds of the grid
					if (gridY < GRID_ROWS && gridX < GRID_COLS) {
						
						occupiedGrid[gridY][gridX] = true;
					}
				}
			}
		});
		
		// Count possible placements for the dimensions of the new block
		let maxPossible = 0;
		
		for (let y = 0; y <= GRID_ROWS - newBlockHeight; y++) {
			for (let x = 0; x <= GRID_COLS - newBlockWidth; x++) {
				
				let canPlace = true;
				
				for (let dy = 0; dy < newBlockHeight; dy++) {
					for (let dx = 0; dx < newBlockWidth; dx++) {
						
						if (occupiedGrid[y + dy][x + dx]) {
							
							canPlace = false;
							break;
						}
					}
					if (!canPlace) {
						
						break;
					}
				}
				if (canPlace) {
					
					maxPossible++;
				}
			}
		}
		
		return maxPossible;
	};
	
	const handleAddBlock = (width, height, content, id) => {
		
		// Calculate the maximum number of blocks that can be added
		const MAX_BLOCKS = calculateMaxBlocks(blocks, width, height);
		
		// If the current number of blocks meets the maximum possible based on the layout, alert the user
		if (blocks.length >= MAX_BLOCKS) {
			
			alert("Maximum number of blocks reached!");
			return;
		}
		
		const newId = `block-${id}-${newBlockCount}`;
		let availablePosition = null;
		
		if (!availablePosition && blocks.length < MAX_BLOCKS) {
			
			for (let y = 0; y < GRID_ROWS; y++) {
				for (let x = 0; x < GRID_COLS; x++) {
				
					// Check if new block fits within grid boundaries
					if (x + width <= GRID_COLS && y + height <= GRID_ROWS) {
					
						let canPlace = true;
					
						// Check if all cells that the new block would occupy are free
						for (let dy = 0; dy < height; dy++) {
							for (let dx = 0; dx < width; dx++) {
							
								// Check for overlap with an existing block
								if (blocks.some(block => block.x === (x + dx) && block.y === (y + dy))) {
								
									canPlace = false;
									break;
								}
							}
							// Exit if there's overlap
							if (!canPlace) {
							
								break;
							}
						}
						// If it can be placed, then set the available position
						if (canPlace) {
						
							availablePosition = { x, y, w: width, h: height };
							break;
						}
					}
				}
        			// Break the outer loop if a valid position has been found
        			if (availablePosition) {
        			
        				break;
        			}
        		}
        	}
        	        	
        	// If a position is available, add new block to state
        	if (availablePosition) {
        		
        		// If a position is available, add new block to state
        		setBlocks(prevBlocks => [
        			...prevBlocks,
        			{ i: newId, x: availablePosition.x, y: availablePosition.y, w: width, h: height, content }
        		]);
        		
        		// Increment the count of new blocks added
        		setNewBlockCount(prevCount => prevCount + 1);
        		
        		// Update layout with the new block's dimensions and position
        		setLayout(prevLayout => [...prevLayout, { i: newId, ...availablePosition }]);
        	}
        	else {
        		alert("No available space to add a new block!");
        	}
        };


was attempting to:

- Check for Available Space: Allow placing new blocks by iterating through the grid.
- Allow Stacking Until GRID_ROWS: Place blocks in subsequent rows if the previous row is full.
- Use calculateMaxBlocks to determine space: Before attempting to place a new block, verify with calculateMaxBlocks if there 
are any available spaces in the entire grid.

Thoughht using:
if (!availablePosition && blocks.length < MAX_BLOCKS) {}


Now of the attempts work properly.