.voces-regular {
  font-family: "Voces", sans-serif;
  font-weight: 400;
  font-style: normal;
}

const { useState, useRef, useCallback, useEffect, forwardRef, memo } = React;
const { createGlobalStyle } = styled;

const useModal = (initialShow: boolean): [boolean, () => void] => {
	const [show, setShow] = useState(initialShow);

	const closeModal = () => setShow(false);

	useEffect(() => {
		setShow(initialShow);
	}, [initialShow]);

	return [show, closeModal];
};

type ButtonComponentProps = {
	disabled?: boolean;
	color?: {
		background?: string;
		text?: string;
	};
	callback?: () => void;
	children: React.ReactNode;
	fontSize?: string
};

const StyledButton = styled.button<ButtonComponentProps>`
	background-color: ${({ color }) => (color && color.background) || "lightgray"};
	border: none;
	border-radius: 0.3em;
	color: ${({ color }) => (color && color.text) || "#333333"};
	cursor: pointer;
	font-size: ${({ fontSize }) => (fontSize && fontSize) || "1em"};
	outline: none;
	opacity: ${({ disabled }) => disabled && .3 || 1};;
	padding: ${({ fontSize }) => fontSize && fontSize || "1em"};
	width: 100%;
`;

const Button = ({ className, onClick, color, fontSize, disabled, children }: ButtonComponentProps) => {
	return (
		<StyledButton
			className={className}
			onClick={onClick}
			color={color}
			fontSize={fontSize}
			disabled={disabled}
		>{children}</StyledButton>
	);
};

type ModalComponentProps = {
	className?: string;
	initialShow?: boolean;
	showCloseButton?: boolean;
	closableOverlay?: boolean;
	//closeable?: boolean;
};

const StyledModal = styled.div`
	background-color: #fff;
	border-radius: .4em;
	box-shadow: 0 .5em .6em 0 rgba(0,0,0,0.2),0 .6em 2em 0 rgba(0,0,0,0.17);
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	position: relative;
	min-height: 14em;
	min-width: 20em;

	& .modal-close-button {
		background: transparent;//#6486ed;
		color: #aaa;
		border-radius: 100%;
		display: block;
		font-size: 1.4em;
		height: 2.4em;
		padding: 0;
		position: absolute;
		top: 0;//-1.2em;
		right: 0;//-1.2em;
		width: 2.4em;
	}
`;

const Overlay = styled.div`
	background-color: rgba(0, 0, 0, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2000;
`;

const ModalContent = styled.p`
	text-align: center;
`;

const Modal = ({ className, initialShow=true, showCloseButton=true, closableOverlay=true, children }: ModalComponentProps) => {
	const [show, closeModal] = useModal(initialShow);

	return show ? (
		<Overlay className="modal-overlay" {...(closableOverlay && {onClick: closeModal})}>
			<StyledModal className={className} onClick={e => e.stopPropagation()}>
				<ModalContent className="modal-content">{children}</ModalContent>
				{showCloseButton && <Button
					className="modal-close-button"
					onClick={closeModal}
				>×</Button>}
			</StyledModal>
		</Overlay>
	) : null;
};

const GlobalStyle = createGlobalStyle`
	html {
		
	}
    body {
		background-color: #C7E5E6;
		text-align: center;
    }
`;

const App = () => {
	return (
		<div>
		<GlobalStyle />
		<h1>Hello world!</h1>
			<Modal className="voces-regular">
					<div>
						<h1>Modal</h1>
						<p>something</p>
					</div>
				</Modal>
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));