import type { FC } from "react";

import { Button, Stack, Title } from "@mantine/core";

import { TbankConnectionSection } from "@/features/tbank-connection";

import { useSettingsPageVm } from "./SettingsPage.vm";

const SettingsPage: FC = () => {
	const { onLogout, t } = useSettingsPageVm();

	return (
		<Stack>
			<Title order={1}>{t("settings.title")}</Title>

			<TbankConnectionSection />

			<Button onClick={onLogout}>{t("auth.logout")}</Button>
		</Stack>
	);
};

export { SettingsPage };