import styled from "@emotion/styled";
import Camera from "@mui/icons-material/Camera";

import { Dead as DeadIcon } from "./DeadIcon";

const BarcodeError = styled.div`
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;

	display: flex;
	align-items: center;
	justify-content: center;
`;

const ErrorBox = styled.div`
	background: #111111;
	border: 1px solid #3e3e3e;
	border-radius: 3px;

	max-width: 100%;
	width: 335px;

	color: white;
	text-align: center;
`;

export function ErrorIcon({ icon, message }: { icon?: string; message: string }) {
	let Icon: React.FC<any> = DeadIcon;

	if (icon === "camera") {
		Icon = Camera;
	}

	return (
		<BarcodeError>
			<ErrorBox>
				<Icon sx={{ color: "#eee", fontSize: "3.5rem", my: 2 }} />
				<br />
				<p>{message}</p>
			</ErrorBox>
		</BarcodeError>
	);
}