import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";

/** Props for the heading wrapper rendered around an Accordion trigger. */
export interface AccordionHeaderProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
  /** Heading level element. @default "h3" */
  as?: string;
  children?: JSX.Element;
}

/** Heading wrapper for an Accordion trigger. Defaults to h3. */
export function AccordionHeader(props: AccordionHeaderProps): JSX.Element {
  const [local, rest] = splitProps(props, ["as", "children"]);
  return (
    <Dynamic component={local.as ?? "h3"} {...rest}>
      {local.children}
    </Dynamic>
  );
}
