@page "/"
@inject IJSRuntime jsRuntime

<PageTitle>Home</PageTitle>

<div class="double_centered_boxes">
    <MudText Align="Align.Center" Typo="Typo.h2">Welcome to<br /><b>OpenBirch!!!</b></MudText>
    <div></div>
    <div style="height: 200px; display: grid; place-items: center;">
        <div style="align-self: end;" class="input-field">
            <MudTextField Class="pa-4" @bind-Value="temp" Variant="Variant.Outlined" @onclick="()=>hasInteracted = true"></MudTextField>
        </div>
    </div>
</div>

@code {
    public string temp = " ";
    public bool hasInteracted = false; // Has the user interacted with the input field?

    protected override async Task OnInitializedAsync()
    {
        StartAutoTyping();
    }

    private async void StartAutoTyping()
    {
        await Task.Delay(1000);

        foreach (char letter in "Balls... Itchy... HELP ME!!!")
        {
            temp += letter;
            await InvokeAsync(StateHasChanged); // Trigger UI update
            await Task.Delay(200); // Non-blocking delay

            if (!hasInteracted) continue;

            temp = ""; // Clear input and let user input
            await InvokeAsync(StateHasChanged);
            return;
        }
    }
}