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

/**
 * Deviation from source: the React version accepts `asChild` (via Radix
 * `Slot.Root`) to merge these props/classes onto an arbitrary child element
 * instead of rendering its own `<div>`. Marko 6 has no dynamic-tag /
 * props-merging primitive equivalent to `Slot.Root`, and this codebase's
 * other ports (e.g. `button.marko`) already drop `asChild` for the same
 * reason, so `BubbleContent` always renders a `<div>` here. Callers who need
 * a `<button>`/`<a>` interaction target can put one inside the content body
 * — the source CSS already styles `[data-slot=bubble-content]:is(button,a)`
 * descendants via the parent `Bubble` variant classes, so this preserves the
 * visible behavior for the common case.
 */
export interface Input extends Marko.Input<"div"> {}

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

<div
  data-slot="bubble-content"
  class=cn(styles.root, className)
  ...rest
>
  <${content}/>
</div>