import { isValidElement } from 'react';
import { useWidget } from 'hooks';

const WidgetHeader = ({ children }: WidgetHeaderProps) => {
	const { flow, themeContent } = useWidget();
	const { logo, hideLogo } = themeContent[flow] || {};

	return (
		<>
			{!hideLogo ? (
				typeof logo === 'string' ? (
					<img src={logo} alt='logo' style={{ width: '50%' }} />
				) : (
					isValidElement(logo) && logo
				)
			) : (
				<></>
			)}
			{children}
		</>
	);
};

WidgetHeader.defaultProps = {
	hideLogo: false,
};

export default WidgetHeader;

export interface WidgetHeaderProps {
	children?: React.ReactNode;
}
