/**
 * WordPress dependencies
 */
import {
	__experimentalVStack as VStack,
	__experimentalHStack as HStack,
	__experimentalHeading as Heading,
	__experimentalSpacer as Spacer,
	Button,
	__experimentalText as Text,
} from '../../../components';
import { closeSmall } from '../../../icons';
import { __ } from '../../../i18n';
import type { ButtonProps } from '@wordpress/components/build-types/button/types';

import './style.scss';

interface InspectorPopoverHeaderAction {
	label: string;
	icon?: ButtonProps[ 'icon' ] | JSX.Element;
	onClick: () => void;
}

interface InspectorPopoverHeaderProps {
	title: React.ReactNode;
	help?: React.ReactNode;
	actions?: InspectorPopoverHeaderAction[];
	onClose?: () => void;
}

export default function InspectorPopoverHeader( {
	title,
	help,
	actions = [],
	onClose,
}: InspectorPopoverHeaderProps ): JSX.Element {
	return (
		<VStack className="block-editor-inspector-popover-header" spacing={ 4 }>
			<HStack alignment="center">
				<Heading
					className="block-editor-inspector-popover-header__heading"
					level={ 2 }
					size={ 13 }
				>
					{ title }
				</Heading>
				<Spacer />
				{ actions.map( ( { label, icon, onClick } ) => (
					<Button
						size="small"
						key={ label }
						className="block-editor-inspector-popover-header__action"
						label={ label }
						icon={ icon }
						variant={ ! icon ? 'tertiary' : undefined }
						onClick={ onClick }
					>
						{ ! icon && label }
					</Button>
				) ) }
				{ onClose && (
					<Button
						size="small"
						className="block-editor-inspector-popover-header__action"
						label={ __( 'Close' ) }
						icon={ closeSmall }
						onClick={ onClose }
					/>
				) }
			</HStack>
			{ help && <Text>{ help }</Text> }
		</VStack>
	);
}