import { Header, Profile } from '../Header';
import { Outlet } from 'react-router-dom';

import { Container, HeaderContainer, ContentContainer, FullContainer } from '../../../styles/Components';
import { styled } from 'styled-components';

const Layout = () => {
	return (
		<>
			<Container type="flex">
				<HeaderContainer>
					<Header />
				</HeaderContainer>
				<FullContainer>
					<Profile />
					<MainContainer>
						<Outlet />
					</MainContainer>
				</FullContainer>
			</Container>
		</>
	);
};
export default Layout;

const MainContainer = styled(ContentContainer)`
	padding: 0;
`;
