import { cn } from "#lib/utils.ts";
import { menuAction as styles } from "./classes.ts";

export interface Input extends Marko.Input<"button"> {
  /** Only reveal the action on hover/focus of its menu item (md and up). */
  showOnHover?: boolean;
}

<const/{ showOnHover, class: className, content, ...rest }=input/>

<button
  ...rest
  type=input.type ?? "button"
  data-slot="sidebar-menu-action"
  data-sidebar="menu-action"
  class=cn(
    styles.root,
    showOnHover && styles.showOnHover,
    className,
  )
>
  <${content}/>
</button>