import React from 'react';

import PageLayout from 'layouts/Page';

import { useBanner } from 'models/banner';
import { useHistory } from 'models/routing';

const PageContent: React.FC = () => {
	const history = useHistory();
	const [{ banners }] = useBanner();

	return (
		<div>
			<div role="button" tabIndex={0} onClick={() => history.back()} onKeyPress={() => {}}>
				{'< go back'}
			</div>
			<div>
				{banners.length !== 0 &&
					banners.map(banner => (
						<div key={banner.id}>
							<div>name: {banner.name}</div>
							<div>
								<img src={banner.image} alt="" />
							</div>
						</div>
					))}
			</div>
		</div>
	);
};

const Blogs = PageLayout({
	PageHeader: "Blogs's page",
	PageContent,
});

Blogs.displayName = 'Blogs';

export default Blogs;