@namespace Lumeo
@inject Lumeo.Services.Localization.ILumeoLocalizer L

<button type="button" class="@CssClass" aria-label="@EffectiveAriaLabel" @onclick="OnClose" @attributes="AdditionalAttributes">
    <Blazicon Svg="Lucide.X" class="h-4 w-4" />
    <span class="sr-only">@EffectiveAriaLabel</span>
</button>

@code {
    [Parameter] public EventCallback OnClose { get; set; }
    /// <summary>Accessible name for the close button. Override for i18n.</summary>
    [Parameter] public string? AriaLabel { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string EffectiveAriaLabel => AriaLabel ?? L["Toast.Close"];

    // Position: 4px inset on mobile so the 44px focus ring doesn't clip the toast border.
    // Size: 44px on touch (WCAG 2.5.5) → 24px on desktop with hover-reveal pattern.
    // Affordance: text-foreground/50 → hover/focus text-foreground + subtle bg → clear interactive state on every variant.
    // Focus ring: ring-current so it inherits text color, staying visible on coloured variants (Destructive, Success, Warning, Info).
    private string CssClass => $"group/close absolute right-1 top-1 inline-flex items-center justify-center rounded-md h-11 w-11 sm:right-1 sm:top-1 sm:h-6 sm:w-6 text-foreground/50 hover:text-foreground hover:bg-foreground/10 focus-visible:bg-foreground/10 focus-visible:text-foreground opacity-100 sm:opacity-0 transition-[opacity,color,background-color] sm:group-hover:opacity-100 focus-visible:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1 focus-visible:ring-offset-transparent {Class}".Trim();
}
