import { isValidElement } from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

import { useWidget } from 'hooks';

import type { StackProps } from '@mui/material';

export interface WidgetTitleProps extends StackProps {}

const WidgetTitle = ({ children, ...props }: WidgetTitleProps) => {
	const { flow, themeContent } = useWidget() || {};

	const { title, subtitle, hideLogo = false } = themeContent[flow] || {};

	return (
		<>
			<Stack
				{...{
					id: 'widget-title',
					sx: { flexGrow: 1, px: 3, pt: hideLogo ? 8 : 0 },
					...props,
				}}
			>
				{isValidElement(title) ? (
					title
				) : (
					<Typography variant='h5' align='center' sx={{ pb: 3 }}>
						{title}
					</Typography>
				)}
				{isValidElement(subtitle) ? (
					subtitle
				) : (
					<Typography align='center'>{subtitle}</Typography>
				)}
				{children}
			</Stack>
		</>
	);
};

export default WidgetTitle;
