import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useCollapsibleContext } from "./collapsible-context";

export interface CollapsibleContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
  children?: JSX.Element;
}

/**
 * The content panel. Always stays in the DOM (uses hidden attribute) so CSS
 * transitions have access to the element when animating in/out.
 */
export function CollapsibleContent(props: CollapsibleContentProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useCollapsibleContext();

  return (
    <div
      id={ctx.contentId()}
      hidden={!ctx.isOpen() || undefined}
      data-state={ctx.isOpen() ? "open" : "closed"}
      {...rest}
    >
      {local.children}
    </div>
  );
}
