import React from "react";
import PropTypes from "prop-types";
import { Box, Button, Heading, Text } from "grommet";

function GenericPageWithIcon(props) {
	return (
		<Box
			align="center"
			background="light-1"
			width="100vw"
			justify="center"
			direction="column"
			alignContent="center"
			height="95vh"
			style={{
				padding: "0 3em",
			}}
		>
			{props.icon}
			<Heading>{props.title}</Heading>
			<Text style={{ textAlign: "center" }}>{props.description}</Text>
			<Button primary size="large" onClick={props.close}
				label="Dismiss" margin="1.5em" />
		</Box>
	);
}

GenericPageWithIcon.propTypes = {
	title: PropTypes.string,
	description: PropTypes.string,
	icon: PropTypes.node,
	close: PropTypes.func
};

export default GenericPageWithIcon;