import { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from "./variants.ts";
import { cn } from "#lib/utils.ts";

export interface Input extends Marko.HTMLAttributes<Element>, SidebarMenuButtonVariants {
  /** Renders an <a> instead of a <button> when set (with href passed through rest). */
  href?: string;
  active?: boolean;
}

<const/{ variant, size, active, class: className, content, href, ...rest }=input/>

<const/menuButtonClass=cn(sidebarMenuButtonVariants({ variant, size }), className)/>

<if=href>
  <a
    ...rest
    href=href
    data-slot="sidebar-menu-button"
    data-sidebar="menu-button"
    data-size=(size ?? "default")
    data-active=(active ? "true" : undefined)
    class=menuButtonClass
  >
    <${content}/>
  </a>
</if>
<else>
  <button
    ...rest
    type="button"
    data-slot="sidebar-menu-button"
    data-sidebar="menu-button"
    data-size=(size ?? "default")
    data-active=(active ? "true" : undefined)
    class=menuButtonClass
  >
    <${content}/>
  </button>
</else>