--!native
--!optimize 2

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Roact = require(ReplicatedStorage.Packages.roact)

local ProgressBar = require(script.Parent.Components.ProgressBar)

local theme = {
	background = Color3.fromRGB(17, 17, 27),
	text = Color3.fromRGB(255, 255, 255),
	subtext = Color3.fromRGB(205, 214, 244),
}

local function LoadingScreen(props)
	local status = props.status or "Loading game..."
	local detail = props.detail or "Preloading..."
	local progress = props.progress or 0
	local visible = props.visible

	return Roact.createElement("ScreenGui", {
		Name = "LoadingScreen",
		DisplayOrder = 9999,
		IgnoreGuiInset = true,
		ResetOnSpawn = false,
		ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
		Enabled = visible ~= false,
	}, {
		Root = Roact.createElement("Frame", {
			Size = UDim2.fromScale(1, 1),
			BackgroundColor3 = theme.background,
			BorderSizePixel = 0,
		}, {
			Title = Roact.createElement("TextLabel", {
				AnchorPoint = Vector2.new(0.5, 0.5),
				Position = UDim2.new(0.5, 0, 0.5, 0),
				BackgroundTransparency = 1,
				Font = Enum.Font.Code,
				Text = status,
				TextColor3 = theme.text,
				TextSize = 32,
				TextWrapped = true,
				AutomaticSize = Enum.AutomaticSize.XY,
				TextXAlignment = Enum.TextXAlignment.Center,
				TextYAlignment = Enum.TextYAlignment.Center,
			}, {
				Gradient = Roact.createElement("UIGradient", {
					Color = ColorSequence.new({
						ColorSequenceKeypoint.new(0, Color3.fromRGB(245, 194, 231)),
						ColorSequenceKeypoint.new(0.5, Color3.fromRGB(203, 166, 247)),
						ColorSequenceKeypoint.new(1, Color3.fromRGB(137, 180, 250)),
					}),
					Rotation = 30,
					Transparency = NumberSequence.new({
						NumberSequenceKeypoint.new(0, 0),
						NumberSequenceKeypoint.new(1, 0),
					}),
				}),
			}),
			Progress = Roact.createElement(ProgressBar, {
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.new(0.5, 0, 1, -32),
				progress = progress,
				detail = detail,
			}),
		}),
	})
end

return LoadingScreen