/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';

/**
 * SolidWP dependencies
 */
import { Heading, Text, TextSize } from '@ithemes/ui';

/**
 * Internal dependencies
 */
import Header from '../header';
import { Navigation, SolidwpMailRoot, StyledNavLink } from './styles';

/** @typedef {import('React').ReactNode} ReactNode */

/**
 * Main layout component for the SolidWP Mail plugin.
 *
 * @param {Object}    props                 - The component props.
 * @param {ReactNode} props.children        - The children components to render within the layout.
 * @param {string}    [props.headerText=''] - The text to display in the header.
 * @param {boolean}   [props.withNav=true]  - Whether to display the navigation.
 */
const MainLayout = ( { children, headerText = '', withNav = true } ) => {
	return (
		<>
			<Header />
			<SolidwpMailRoot>
				<Heading level={ 2 }>{ headerText }</Heading>
				{ withNav && (
					<Navigation>
						<StyledNavLink to="/providers">
							<Text
								size={ TextSize.LARGE }
								weight={ 600 }
								align={ 'center' }
							>
								{ __( 'Connections', 'LION' ) }
							</Text>
						</StyledNavLink>
						<StyledNavLink to="/email-test">
							<Text
								size={ TextSize.LARGE }
								weight={ 600 }
								align={ 'center' }
							>
								{ __( 'Email Test', 'LION' ) }
							</Text>
						</StyledNavLink>
					</Navigation>
				) }
				{ children }
			</SolidwpMailRoot>
		</>
	);
};

export default MainLayout;