@inject ICategoryProvider CategoryProvider; 

<MudPaper Class="pa-4 ma-2 rounded" Elevation="3">
    <MudText Typo="Typo.h6">Categories</MudText>
    <MudDivider></MudDivider>
    <MudList T="string">
        @foreach (Category category in _categories)
        {
            <MudListItem Text=@category.CategoryName OnClick="@(() => OnCategoryItemClicked(category.CategoryName))"></MudListItem>
        }
    </MudList>
    @ChildContent
</MudPaper>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public List<Category> _categories = new();
    
    [Parameter]
    public EventCallback<string> ListItemClickedCallback { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var categories = await CategoryProvider.AllCategories();
        _categories.AddRange(categories);
    }

    public async Task RefreshData()
    {
        _categories.Clear();
        var categories = await CategoryProvider.AllCategories();
        _categories.AddRange(categories);
        StateHasChanged(); 
    }

    protected async Task OnCategoryItemClicked(string categoryName)
    {
        await ListItemClickedCallback.InvokeAsync(categoryName);
    } 
}
