@namespace Lumeo

<li>
    <button class="@CssClass" @onclick="OnClick" @attributes="AdditionalAttributes">
        @ChildContent
    </button>
</li>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public bool IsActive { get; set; }
    [Parameter] public EventCallback OnClick { 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 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 h-11 w-11 sm:h-9 sm:w-9 {(IsActive ? "border border-input bg-background shadow-sm" : "hover:bg-accent hover:text-accent-foreground")} {Class}".Trim();
}
