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

export function SettingsPage() {
	const { t } = useTranslation();
	return (
		<Stack>
			<Title order={1}>{t("settings.title")}</Title>
			<SettingsPageEmpty />
		</Stack>
	);
}

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

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

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