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

<li>
    <button class="@CssClass" @onclick="OnClick" disabled="@Disabled" @attributes="AdditionalAttributes">
        <span>@L["Pagination.Next"]</span>
        <Blazicon Svg="Lucide.ChevronRight" class="h-4 w-4 [dir=rtl]:rotate-180" />
    </button>
</li>

@code {
    [Parameter] public EventCallback OnClick { get; set; }
    [Parameter] public bool Disabled { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring focus-visible:ring-offset-2 h-11 sm:h-9 px-3 disabled:pointer-events-none disabled:opacity-50 {Class}".Trim();
}
