import React from 'react';

const Body = {
  	maxWidth: '1000px',
  	minWidth: '768px',
  	margin: 'auto',
	display: "flex",
	heigth: "100%",
	color: "white",
	//textAlign: "center",
};

const SideBar = {
	maxWidth: "250px",
	flex: "1",
}

const hrefStyle = {
	color: "#385f71", 
	textDecoration: "none"
}

const Post = (props) => {
  	const { currentPost, isLoaded } = props;

  	const postData = 
		<div style={Body}>
			<div style={SideBar}>
				<ul style={{listStyle: "none", paddingLeft: "0"}}>
					<li style={{marginTop: "10px"}}>
						<a style={hrefStyle} href="/">
							<h2>Home</h2>
						</a>
					</li>
					<li style={{marginTop: "10px"}}>
						<a style={hrefStyle} href="/docs">
							<h2>Schedules</h2>
						</a>
					</li>
					<li style={{marginTop: "10px"}}>
						<a style={hrefStyle} href="/docs/about">
							<h2>About</h2>
						</a>
					</li>
					<li style={{marginTop: "10px"}}>
						<a style={hrefStyle} href="/docs/privacy-policy">
							<h2>Privacy Policy</h2>
						</a>
					</li>
				</ul>
			</div>
			<div style={{flex: "1"}}>
				{currentPost}
			</div>
		</div>

	const loadedCheck = isLoaded ? 
		<div>
			{postData}	
		</div>
		:
		<div>
		</div>

	return (
		<div>	
			{loadedCheck}
		</div>	
	)
}

export default Post;