local M=Roact.Component:extend("\083\117\114\102\097\099\101\067\097\110\118\097\115")M.defaultProps={numRows=2,numCols=5,paddingLeft=UDim.new(0,8);paddingRight=UDim.new(0,8),paddingTop=UDim.new(0,8);paddingBottom=UDim.new(0,8)}function M.render(M)local J=M.props[Roact.Children]for M,C in ipairs(J)do J[M]=Roact.createElement("\070\114\097\109\101",{LayoutOrder=M,BackgroundTransparency=1,Size=UDim2.fromScale(1,1)},C)end return Roact.createElement("\070\114\097\109\101",{BackgroundTransparency=1;Size=UDim2.fromScale(1,1);[Roact.Ref]=M.frame},Cryo.List.join({Roact.createElement("\085\073\071\114\105\100\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder;CellPadding=UDim2.fromScale(0,0);CellSize=UDim2.fromScale(1/M.props.numCols,1/M.props.numRows)});Roact.createElement("\085\073\080\097\100\100\105\110\103",{PaddingLeft=M.props.paddingLeft,PaddingRight=M.props.paddingRight,PaddingTop=M.props.paddingTop,PaddingBottom=M.props.paddingBottom})},J))end return M

local SurfaceCanvas = Roact.Component:extend("SurfaceCanvas")

SurfaceCanvas.defaultProps = {
	numRows = 2,
	numCols = 5,
	paddingLeft = UDim.new(0, 8),
	paddingRight = UDim.new(0, 8),
	paddingTop = UDim.new(0, 8),
	paddingBottom = UDim.new(0, 8),
}

function SurfaceCanvas:render()
	local artItems = self.props[Roact.Children]
	for i, artItem in ipairs(artItems) do
		artItems[i] = Roact.createElement("Frame", {
			LayoutOrder = i,
			BackgroundTransparency = 1,
			Size = UDim2.fromScale(1, 1),
		}, artItem)
	end

	return Roact.createElement(
		"Frame",
		{
			BackgroundTransparency = 1,
			Size = UDim2.fromScale(1, 1),
			[Roact.Ref] = self.frame,
		},
		Cryo.List.join({
			Roact.createElement("UIGridLayout", {
				SortOrder = Enum.SortOrder.LayoutOrder,
				CellPadding = UDim2.fromScale(0, 0),
				CellSize = UDim2.fromScale(1 / self.props.numCols, 1 / self.props.numRows),
			}),
			Roact.createElement("UIPadding", {
				PaddingLeft = self.props.paddingLeft,
				PaddingRight = self.props.paddingRight,
				PaddingTop = self.props.paddingTop,
				PaddingBottom = self.props.paddingBottom,
			}),
		}, artItems)
	)
end

return SurfaceCanvas
