import { css } from "@emotion/css";
import { Center, Cover, Stack } from "@firebox/components";
import { MathuscriptPlayer } from "./player/Player";
import { Katex } from "./player/MathText";

const script = String.raw`

bridget (happy) "Hi, friends!"

board "Given $f: \mathbb{Q} \to \mathbb{R}$ and $x \in \mathbb{Q}$, there is a unique $y \in \mathbb{N}$ such that $f(x)=y$"

axelle (happy) "Wow, did you know that $a^2+b^2=c^2$?"

`

const App = (props: { name: string }) => {
	const {name} = props;
	return (
		<div className={css`
			margin: auto;
		`}>
			<h1>MathU</h1>
			<MathuscriptPlayer script={script} />
		</div>
	);
};

export const app = <App name="World" />;
