import { memo, ReactNode } from 'react';
import { BlockHeadingReport } from './BlockHeadingReport';
import { BlockHeadingStandard } from './BlockHeadingStandard';

type BlockHeadingProps = {
	title: ReactNode;
	subtitle?: ReactNode;
	controls?: ReactNode;
	className?: string;
	isReport?: boolean;
	reportBlockIndex?: number;
	isLoading?: boolean;
};

/**
 * Wrapper component that conditionally renders the appropriate heading type.
 *
 * @param {Object}           props                 - Component props.
 * @param {React.ReactNode}  props.title            - The heading title.
 * @param {React.ReactNode}  props.subtitle         - The sub title.
 * @param {React.ReactNode}  props.controls         - Optional controls to render on the right side.
 * @param {string}           props.className        - Additional CSS classes.
 * @param {boolean}          props.isReport         - Whether this is a report view.
 * @param {number}           props.reportBlockIndex - Index of the block in the report's content array (for report views only).
 * @param {boolean}          props.isLoading        - Whether the block is currently loading.
 * @param {boolean}          props.pro              - Whether this block is a Pro feature.
 * @param {string}           props.proId            - Optional feature id for tier-specific Pro checks.
 * @return {JSX.Element} The block heading component.
 */
export const BlockHeading = memo( ({ title, subtitle = '', controls, className = '', isReport = false, reportBlockIndex, isLoading = false }: BlockHeadingProps ) => {
	if ( isReport ) {
		return (
			<BlockHeadingReport
				title={title}
				controls={controls}
				className={className}
				reportBlockIndex={reportBlockIndex}
			/>
		);
	}

	return (
		<BlockHeadingStandard
			title={title}
			subtitle={subtitle}
			controls={controls}
			className={className}
			isLoading={isLoading}
		/>
	);
});

BlockHeading.displayName = 'BlockHeading';
