/**
 * External dependencies.
 */
import {
	Container,
	Label,
} from '@bsf/force-ui';

/**
 * Render the Header for a Settings section.
 *
 * @since x.x.x
 *
 * @param {Object} props - The props for this element. 
 * @return {Element}     - The rendered Settings Header, with all the required details.
 */
const SettingsHeader = ( props ) => {
	// Destructure the required props.
	const {
		heading,
		description,
		help,
		children,
	} = props;

	// Render the container with the heading and subheading, and add the children to the right.
	return (
		<Container align="center" className="mb-0.5 w-full flex lg:items-center items-start justify-between lg:flex-row flex-col">
			<Container.Item className="space-y-1 lg:max-w-[480px]">
				<Label className="font-semibold mb-1" size="md" tag="p">
					{ heading }
				</Label>
				{ description && (
					<Label className="m-0 font-normal" size="sm" tag="p" variant="help">
						{ description }
					</Label>
				) }
				{ help && (
					<Label className="m-0 italic font-normal" size="sm" tag="p" variant="help">
						{ help }
					</Label>
				) }
			</Container.Item>
			{ children }
		</Container>
	);
};

// Export the SettingsHeader component by default.
export default SettingsHeader;