import { css } from "@emotion/css";
import { Center, Cover, Stack } from "@firebox/components";

const App = (props: { name: string }) => {
	const {name} = props;
	return (
		<Stack>
			<div className={css`background-color: floralwhite;`}>
				<Cover gap pad>
					<Center>
						<Stack gap={-1}>
							<h1>Hello, {name}!</h1>
							<p>Welcome to a website with a certain design philosophy. Tell me how it's working out! I want to see this text wrap a few times. Hopefully this sentence will help.</p>
						</Stack>
					</Center>
					<Cover.Footer>A page by Dylan Pizzo</Cover.Footer>
				</Cover>
			</div>
			<div className={css`background-color: aliceblue;`}>
				<Cover gap pad>
					<Center>
						<Stack gap={-1}>
							<h1>Hello, {name}!</h1>
							<p>Welcome to a website with a certain design philosophy. Tell me how it's working out! I want to see this text wrap a few times. Hopefully this sentence will help.</p>
						</Stack>
					</Center>
					<Cover.Footer>A page by Dylan Pizzo</Cover.Footer>
				</Cover>
			</div>
		</Stack>
	);
};

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