import type { ReactNode } from 'react';

/**
 * The section header used by every reference section (`.sec-head` with kicker,
 * title, and summary), matching the static design-system markup exactly.
 * @param root0
 * @param root0.kicker
 * @param root0.title
 * @param root0.summary
 * @param root0.action
 */
export const SectionHead = ( {
	kicker,
	title,
	summary,
	action,
}: {
	kicker: string;
	title: ReactNode;
	summary: ReactNode;
	action?: ReactNode;
} ) => (
	<div className="sec-head">
		<div className="sec-head-main">
			<div className="kicker">{ kicker }</div>
			<h2>{ title }</h2>
			<p>{ summary }</p>
		</div>
		{ action ? <div className="sec-head-action">{ action }</div> : null }
	</div>
);
