import Skeleton from "../skeleton/skeleton.marko";
import { cn } from "#lib/utils.ts";
import { menuSkeleton as styles } from "./classes.ts";

export interface Input extends Marko.Input<"div"> {
  showIcon?: boolean;
}

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

// Random width between 50 to 90%.
<const/width=`${Math.floor(Math.random() * 40) + 50}%`/>

<div
  ...rest
  data-slot="sidebar-menu-skeleton"
  data-sidebar="menu-skeleton"
  class=cn(styles.root, className)
>
  <if=showIcon>
    <Skeleton
      class=styles.icon
      data-sidebar="menu-skeleton-icon"
    />
  </if>
  <Skeleton
    class=styles.text
    data-sidebar="menu-skeleton-text"
    style={ "--skeleton-width": width }
  />
</div>