<div class="@BuildCssClass()" role="tablist" aria-label="@AriaLabel">
    @foreach (var item in Items)
    {
        var isSelected = string.Equals(item.Value, SelectedValue, StringComparison.Ordinal);

        <button
            type="button"
            class="segmented-tabs-button @(isSelected ? "is-selected" : null)"
            role="tab"
            aria-selected="@isSelected"
            disabled="@item.IsDisabled"
            @onclick="() => SelectAsync(item.Value)">
            <span>@item.Label</span>
            @if (!string.IsNullOrWhiteSpace(item.Badge))
            {
                <span class="segmented-tabs-badge">@item.Badge</span>
            }
        </button>
    }
</div>

@code {
    [Parameter]
    public IReadOnlyList<SegmentedTabItem> Items { get; set; } = [];

    [Parameter]
    public string? SelectedValue { get; set; }

    [Parameter]
    public EventCallback<string> SelectedValueChanged { get; set; }

    [Parameter]
    public string AriaLabel { get; set; } = "Options";

    [Parameter]
    public string? CssClass { get; set; }

    private string BuildCssClass() =>
        string.IsNullOrWhiteSpace(CssClass)
            ? "segmented-tabs"
            : $"segmented-tabs {CssClass}";

    private Task SelectAsync(string value) =>
        SelectedValueChanged.InvokeAsync(value);
}
