@*
    EN: Auth CTA button with color variants (orange, blue, green, outline, ghost).
    VI: Nút CTA xác thực với các biến thể màu (cam, xanh dương, xanh lá, outline, ghost).
*@

<button type="@ButtonType"
        class="auth-btn auth-btn--@Variant @CssClass"
        disabled="@(Disabled || Loading)"
        aria-label="@AriaLabel"
        aria-busy="@(Loading ? "true" : "false")"
        aria-disabled="@((Disabled || Loading) ? "true" : "false")"
        @onclick="OnClick">
    @if (Loading)
    {
        <span class="spinner-small" aria-hidden="true"></span>
    }
    @if (IconName != null)
    {
        <i data-lucide="@IconName" aria-hidden="true"></i>
    }
    @ChildContent
</button>

@code {
    /// <summary>
    /// EN: Button color variant. Options: orange, blue, green, outline, ghost.
    /// VI: Biến thể màu. Tùy chọn: orange, blue, green, outline, ghost.
    /// </summary>
    [Parameter] public string Variant { get; set; } = "orange";
    
    /// <summary>
    /// EN: HTML button type attribute.
    /// VI: Attribute type của button.
    /// </summary>
    [Parameter] public string ButtonType { get; set; } = "button";
    
    /// <summary>
    /// EN: Whether the button is disabled.
    /// VI: Button có bị disable không.
    /// </summary>
    [Parameter] public bool Disabled { get; set; }
    
    /// <summary>
    /// EN: Whether to show a loading spinner.
    /// VI: Có hiển thị spinner loading không.
    /// </summary>
    [Parameter] public bool Loading { get; set; }
    
    /// <summary>
    /// EN: Optional Lucide icon name.
    /// VI: Tên icon Lucide tùy chọn.
    /// </summary>
    [Parameter] public string? IconName { get; set; }
    
    /// <summary>
    /// EN: Additional CSS classes.
    /// VI: CSS class bổ sung.
    /// </summary>
    [Parameter] public string? CssClass { get; set; }
    
    /// <summary>
    /// EN: Click event callback.
    /// VI: Callback sự kiện click.
    /// </summary>
    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
    
    /// <summary>
    /// EN: Accessible label for screen readers (required when button has no visible text).
    /// VI: Nhãn accessible cho screen reader (bắt buộc khi button không có text hiển thị).
    /// </summary>
    [Parameter] public string? AriaLabel { get; set; }

    /// <summary>
    /// EN: Button content.
    /// VI: Nội dung button.
    /// </summary>
    [Parameter] public RenderFragment? ChildContent { get; set; }
}