@namespace Lumeo

<kbd class="@CssClass" @attributes="AdditionalAttributes">@ChildContent</kbd>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public KbdSize Size { get; set; } = KbdSize.Default;
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"pointer-events-none inline-flex select-none items-center gap-1 rounded border border-border/50 bg-muted font-mono font-medium text-muted-foreground {SizeClasses} {Class}".Trim();

    private string SizeClasses => Size switch
    {
        KbdSize.Sm => "h-5 px-1 text-[10px]",
        KbdSize.Default => "h-5 px-1.5 text-[11px]",
        KbdSize.Lg => "h-6 px-2 text-xs",
        _ => "h-5 px-1.5 text-[11px]"
    };

    public enum KbdSize { Sm, Default, Lg }
}
