import { ReactNode, FC, PropsWithChildren } from "react";

import {
  Collapsible,
  CollapsibleHeaderContent,
} from "@dndbeyond/character-components/es";

interface Props extends PropsWithChildren {
  headerCallout: ReactNode;
  heading: ReactNode;
  metaItems: Array<ReactNode>;
}
export const ExtraManagePaneListingExtra: FC<Props> = ({
  headerCallout,
  heading,
  metaItems,
  children,
}) => {
  let header: ReactNode = (
    <CollapsibleHeaderContent
      heading={heading}
      metaItems={metaItems}
      callout={headerCallout}
    />
  );

  return (
    <Collapsible
      layoutType={"minimal"}
      header={header}
      className="ct-extra-manage-pane__extra"
    >
      {children}
    </Collapsible>
  );
};

export default ExtraManagePaneListingExtra;
