<div class="flex flex-row mt-2">
    <p class="ml-3 font-bold text-justify my-auto grow">@Question</p>
    <div class="flex flex-row">
        <MudIconButton @onclick="async () => await IncreaseHour()" DisableElevation="true" Class="bg-white rounded-full"
            Icon="@Icons.Material.Filled.KeyboardArrowUp" Variant="Variant.Filled" />
        <p class="my-auto ml-1 mr-2 text-xl font-extrabold">@Answer</p>
        <p class="my-auto ml-2 font-extrabold">ساعت</p>
        <MudIconButton @onclick="async () => await DecreaseHour()" DisableElevation="true" Class="bg-white rounded-full"
            Icon="@Icons.Material.Filled.KeyboardArrowDown" Variant="Variant.Filled" />
    </div>
</div>


@code 
{
    private int _hourCounter;

    [Parameter]
    public string Answer { get; set; } = string.Empty;

    [Parameter]
    public EventCallback<string> AnswerChanged { get; set; }

    [Parameter]
    public string Question { get; set; } = string.Empty;

    private async Task IncreaseHour()
    {
        _hourCounter++;
        Answer = _hourCounter.ToString();
        await AnswerChanged.InvokeAsync(Answer);
    }

    private async Task DecreaseHour()
    {
        _hourCounter--;
        Answer = _hourCounter.ToString();
        await AnswerChanged.InvokeAsync(Answer);
    }
}