import React from 'react';
import { cn } from '@Utils/cn';
import { __ } from '@wordpress/i18n';
import SvgLoader from '@Components/SvgLoader';
import { useProUpsellBanner } from '@AH/useProUpsellBanner';
/**
* Renders a layout wrapper for the header.
*
* @param {Object} props - The component props.
* @param {React.ReactNode} props.children - The child elements to be rendered inside the layout.
* @returns {JSX.Element} The rendered header layout component.
*/
function HeaderLayout({ children }) {
const { shouldShowBanner, dismissBanner } = useProUpsellBanner();
const handleCloseBanner = async () => {
await dismissBanner();
};
return (
<>
{/* Spacer for fixed header (and banner if free user) */}
{/* Banner only if not Pro and not dismissed */}
{shouldShowBanner && (
)}
{/* Main header */}
{children}
);
}
export default HeaderLayout;