import Button from "../button/button.marko";
import { cn } from "#lib/utils.ts";
import { trigger as styles } from "./classes.ts";

export interface Input extends Marko.Input<"button"> {
  open?: boolean;
  toggle?: () => void;
}

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

<Button
  ...rest
  type="button"
  data-slot="sidebar-trigger"
  data-sidebar="trigger"
  variant="ghost"
  size="icon-sm"
  class=cn(styles.root, className)
  onClick() {
    toggle?.();
  }
>
  <if=content>
    <${content}/>
  </if>
  <else>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class=styles.icon
    >
      <rect width="18" height="18" x="3" y="3" rx="2"/>
      <path d="M9 3v18"/>
    </svg>
    <span class=styles.srOnly>Toggle Sidebar</span>
  </else>
</Button>