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$"

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

calvin (thinking) "Something else"

bridget (surprised) "Me again000000"

kit (smiling) "I'm Kit 1!"

kit (smiling) "I'm Kit 2!"

board ""

calvin (happy) "I'm back!"

bridget (aha) "I'm on the right now!"

theo (heh) "Oh, hey guys. Didn't see you there."

axelle "Oh, hi."

board "If $ax^2+bx+c=0$, then $x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}$."

theo "Did you know..."

`

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" />;
