import { Paper, Stack, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { RegisterForm } from "../../../features/auth";
import { StateView } from "../../../shared/ui/StateView";

export function RegisterPage() {
	const { t } = useTranslation();
	return (
		<main className="auth-page">
			<Paper className="auth-card" p="xl" radius="lg" withBorder>
				<Stack gap="lg">
					<Title order={1}>{t("auth.register")}</Title>
					<RegisterForm />
				</Stack>
			</Paper>
		</main>
	);
}

export function RegisterPageLoading() {
	const { t } = useTranslation();
	return (
		<StateView
			loading
			title={t("states.loadingTitle")}
			text={t("states.loadingText")}
		/>
	);
}

export function RegisterPageError() {
	const { t } = useTranslation();
	return (
		<StateView
			error
			title={t("states.errorTitle")}
			text={t("states.errorText")}
		/>
	);
}

export function RegisterPageEmpty() {
	const { t } = useTranslation();
	return (
		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
	);
}