interface Props {
	stageSize: Dimension;
	coords: Position;
	scale: number;
	isDark: boolean;
}

function Grid({ stageSize, coords, scale, isDark }: Props) {
	return (
		<pixiGraphics
			draw={(g) => {
				g.clear();

				const tileSize = 16 * scale;

				for (let x = coords.x % tileSize; x < stageSize.width; x += tileSize) {
					g.moveTo(x, 0);
					g.lineTo(x, stageSize.height);
				}

				for (let y = coords.y % tileSize; y < stageSize.height; y += tileSize) {
					g.moveTo(0, y);
					g.lineTo(stageSize.width, y);
				}

				g.stroke({ width: 1, color: isDark ? 0xffffff : 0x000000 });
			}}
		/>
	);
}

export default Grid;
