using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Stepper(
                Step("Personal Info", Stack().Children(
                    TextBlock("Tell us about yourself:").MB(16),
                    Label("Full Name").SetContent(TextBox().SetPlaceholder("John Doe")),
                    Label("Email Address").SetContent(TextBox().SetPlaceholder("john@example.com"))
                )),
                Step("Preferences", Stack().Children(
                    TextBlock("Customize your experience:").MB(16),
                    Toggle(onText: TextBlock("Yes"), offText: TextBlock("No")).Checked(),
                    Toggle(onText: TextBlock("Dark"), offText: TextBlock("Light")),
                    Label("Favorite Color").SetContent(ColorPicker())
                )),
                Step("Terms & Review", Stack().Children(
                    TextBlock("Please review and accept our terms:").MB(16),
                    Card(TextBlock("Detailed terms and conditions text goes here...").Small()),
                    Label("Acceptance").Required().SetContent(CheckBox("I agree to the terms of service")),
                    Button("Complete Registration").Primary().MT(16)
                ))
            ).OnStepChange(s => Toast().Information($"Step {s.CurrentStepIndex + 1}: {s.CurrentStep.Title}"));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}