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

export interface Input extends Marko.Input<"div">, BubbleReactionsVariants {
  align?: "start" | "end";
  side?: "top" | "bottom";
}

<const/{ side = "bottom", align = "end", class: className, content, ...rest }=input/>

<div
  data-slot="bubble-reactions"
  data-align=align
  data-side=side
  class=cn(bubbleReactionsVariants({ side, align }), className)
  ...rest
>
  <${content}/>
</div>