import * as collapsibleMachine from "@zag-js/collapsible";
import type { MachineInput } from "marko-zag";
import { cn } from "#lib/utils.ts";
import { stripOwnProps } from "#lib/native-attrs.ts";

export type Input = MachineInput<"div", collapsibleMachine.Props> & {
  openChange?: (open: boolean) => void;
  trigger?: Marko.AttrTag<{ content: Marko.Body<[Record<string, unknown>]> }>;
  content: Marko.Body;
};

<zag/api=() => collapsibleMachine from=input/>

<const/nativeAttrs=() =>
  stripOwnProps(
    collapsibleMachine.splitProps(input)[1],
    "class",
    "openChange",
    "trigger",
    "content",
  )
>

<div ...nativeAttrs() ...api().getRootProps() data-slot="collapsible" class=cn(input.class)>
  <if=input.trigger>
    <${input.trigger.content}({ ...api().getTriggerProps(), "data-slot": "collapsible-trigger" })/>
  </if>
  <div ...api().getContentProps() data-slot="collapsible-content">
    <${input.content}/>
  </div>
</div>

<return=api>