@namespace Lumeo.Docs.Shared

<div class="flex flex-wrap gap-2">
    <button type="button" data-chip="All"
            class="@ChipClass(null)"
            aria-pressed="@(IsActive(null) ? "true" : "false")"
            @onclick="() => Set(null)">
        All
    </button>
    @foreach (var c in Categories)
    {
        <button type="button" data-chip="@c"
                class="@ChipClass(c)"
                aria-pressed="@(IsActive(c) ? "true" : "false")"
                @onclick="() => Set(c)">
            @c
        </button>
    }
</div>

@code {
    [Parameter, EditorRequired] public IReadOnlyList<string> Categories { get; set; } = [];
    [Parameter] public string? Selected { get; set; }
    [Parameter] public EventCallback<string?> SelectedChanged { get; set; }

    private async Task Set(string? value)
    {
        Selected = value;
        await SelectedChanged.InvokeAsync(value);
    }

    private bool IsActive(string? c) => (Selected ?? "") == (c ?? "");

    private string ChipClass(string? c) => IsActive(c)
        ? "rounded-full px-3 py-1 text-xs font-medium bg-primary text-primary-foreground"
        : "rounded-full px-3 py-1 text-xs font-medium bg-muted/40 text-muted-foreground hover:bg-muted/60 transition-colors";
}
