<MudButton Variant="@Variant"
           Color="@Color"
           @onclick="OnClickCallback"
           @attributes="CapturedAttributes"
           Disabled="IsProcessing"
           DisableElevation="true"
           >
    @if (IsProcessing)
    {
        <div class="flex flex-row w-full mx-auto">
            <MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
            <p class="font-extrabold my-1 mx-auto text-lg">منتظر بمانید</p>
        </div>
    }
    else
    {
        <div class="flex flex-row w-full">
            @if (Variant == Variant.Filled)
            {
                <div class="-mr-2 -ml-6 w-10 h-10 items-center bg-[#000000] bg-opacity-20 rounded-md">
                    <MudIcon Icon="@Icon" class="w-5 h-5 mt-2.5"></MudIcon>
                </div>
            }
            else
            {
                <div class="-mr-2 -ml-6 w-12 h-12 items-center rounded-md">
                    <MudIcon Icon="@Icon" class="w-7 h-7 mt-2"></MudIcon>
                </div>
            }
            <p class="my-auto mx-auto font-extrabold">@Content</p>
        </div>
    }
</MudButton>
@code 
{
    [Parameter]
    public Variant Variant { get; set; }
    [Parameter]
    public Color Color { get; set; }

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

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

    [Parameter]
    public bool IsProcessing { get; set; } = false;

    [Parameter]
    public EventCallback OnClickCallback { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> CapturedAttributes { get; set; } = new();
}