import { Card, type Props as CardProps } from "./Card.tsx";
import { CardBody } from "./CardBody.tsx";
import { Heading } from "./Heading.tsx";

export type Props = CardProps<"details"> & {
	"heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
	"title"?: JSX.Element;
	"header"?: JSX.Element;
};

export const CollapseCard = ({
	"heading-level": headingLevel,
	children,
	title,
	header,
	...props
}: Props) => (
	<Card as="details" {...props}>
		<CardBody as="summary">
			<Heading as={headingLevel} class="u-mbs-0" level="lg">
				{title}
			</Heading>
			{header}
		</CardBody>
		<CardBody>{children}</CardBody>
	</Card>
);