import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useAccordionItemContext } from "./accordion-context";

/** Props for the collapsible content panel of an Accordion item. */
export interface AccordionContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
  children?: JSX.Element;
}

/**
 * Content panel for an Accordion item. Stays in DOM (uses hidden attribute)
 * so CSS transitions work when animating open/closed.
 */
export function AccordionContent(props: AccordionContentProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const itemCtx = useAccordionItemContext();

  return (
    <div
      id={itemCtx.contentId}
      role="region"
      aria-labelledby={itemCtx.triggerId}
      hidden={!itemCtx.isExpanded() || undefined}
      data-state={itemCtx.isExpanded() ? "open" : "closed"}
      {...rest}
    >
      {local.children}
    </div>
  );
}
