@namespace Lumeo

<button type="button" role="menuitemcheckbox" aria-checked="@Checked.ToString().ToLower()" class="@CssClass" @onclick="Toggle" @attributes="AdditionalAttributes">
    <span class="flex h-3.5 w-3.5 items-center justify-center">
        @if (Checked)
        {
            <Blazicon Svg="Lucide.Check" class="h-3.5 w-3.5" />
        }
    </span>
    @ChildContent
</button>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public bool Checked { get; set; }
    [Parameter] public EventCallback<bool> CheckedChanged { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground {Class}".Trim();

    private async Task Toggle()
    {
        Checked = !Checked;
        await CheckedChanged.InvokeAsync(Checked);
    }
}
