@namespace Lumeo

<div class="@CssClass" @attributes="AdditionalAttributes">
    @ChildContent
    @if (OverflowCount > 0)
    {
        <div class="@OverflowClasses">
            <span class="text-xs font-medium">+@OverflowCount</span>
        </div>
    }
</div>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public int Max { get; set; }
    [Parameter] public int Total { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private int OverflowCount => Max > 0 && Total > Max ? Total - Max : 0;

    private string CssClass => $"flex -space-x-3 {Class}".Trim();
    private const string OverflowClasses = "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground";
}
