@namespace Lumeo

<div class="@CssClass" role="button" tabindex="0" aria-expanded="@Context.IsOpen" @onclick="Context.Toggle" @onkeydown="HandleKeyDown" @attributes="AdditionalAttributes">
    @ChildContent
</div>

@code {
    [CascadingParameter] public Collapsible.CollapsibleContext Context { get; set; } = default!;
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm {Class}".Trim();

    private async Task HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" || e.Key == " ")
        {
            await Context.Toggle.InvokeAsync();
        }
    }
}
