/**
 * Top-level directive exports — thin delegators to the api methods
 * {@link CollapsibleApi.triggerRef} / {@link CollapsibleApi.panelRef}
 * (defined inside `createCollapsible`). Either surface works; choose
 * based on import ergonomics.
 *
 * ```tsx
 * // cva-import-friendly form
 * import { collapsibleTrigger, collapsiblePanel } from "quoin";
 * <button ref={collapsibleTrigger(c)} />
 *
 * // api-form — no top-level import needed when `c` is already in scope
 * <button ref={c.triggerRef()} />
 * ```
 */

import type { CollapsibleApi } from "./create-collapsible.tsx";

/**
 * Bind trigger behaviour to a `<button>` (or any clickable element).
 * Composes with other refs/directives via the array form:
 *
 * ```tsx
 * <button ref={[collapsibleTrigger(c), userRef]}>Toggle</button>
 * ```
 *
 * Delegates to `c.triggerRef()`.
 */
export function collapsibleTrigger(
	c: CollapsibleApi,
): (el: HTMLButtonElement | null) => void {
	return c.triggerRef();
}

/**
 * Bind panel behaviour to the panel element. Same composition shape as
 * {@link collapsibleTrigger}. Delegates to `c.panelRef()`.
 */
export function collapsiblePanel(
	c: CollapsibleApi,
): (el: HTMLElement | null) => void {
	return c.panelRef();
}