"use strict";

const React = require("react");

let boxStyle = {
	position: "fixed",
	right: "16px",
	bottom: "16px",
	maxWidth: "40%",
	fontFamily: "sans-serif",
	fontSize: "13px"
};

let headerStyle = {
	background: "rgb(170, 0, 0)",
	color: "white",
	fontWeight: "bold",
	padding: ".3em .8em"
};

let outputStyle = {
	background: "rgb(104, 0, 0)",
	color: "white",
	padding: ".5em .8em",
	maxHeight: "200px",
	fontSize: ".9em",
	fontFamily: "monospace",
	whiteSpace: "pre",
	overflow: "auto"
};

module.exports = function Error({ reason, output }) {
	return (
		<div style={boxStyle}>
			<div style={headerStyle}>
				{reason}
			</div>
			<div style={outputStyle}>
				{output}
			</div>
			<div style={headerStyle}>
				The process will be automatically re-run upon changes.
			</div>
		</div>
	);
};