import React, { FC, PropsWithChildren } from 'react'
import styled from 'styled-components'
import { Header, HeaderProps } from './Header'
import { Footer } from './Footer'
import { Outlet } from 'react-router-dom'

const StyledSection = styled.section`
  display: flex;
  min-height: 100vh;
  flex-direction: column;
`

const StyledHeader = styled(Header)`
  flex: 0 0 auto;
`

const StyledFooter = styled(Footer)`
  flex: 0 0 auto;
`

const StyledMain = styled.main`
  flex: auto;
`

export const Layout: FC<PropsWithChildren<Omit<HeaderProps, 'className'>>> = ({ children, ...headerProps }) => {
	return (
		<StyledSection>
			<StyledHeader {...headerProps} />
			<StyledMain>
				<Outlet />
				{children}
			</StyledMain>
			<StyledFooter />
		</StyledSection>
	)
}
