import React from "react";

import { Box, Button } from "@mui/material";
import { useNavigate } from "react-router-dom";

import EmailProviderConnections from "../components/EmailProviderConnections";
import { useI18n } from "../i18n/I18nProvider";
import { PageHeader } from "../layout/PageLayout";

export default function ConnectedAccountsPage() {
  const navigate = useNavigate();
  const { t } = useI18n();

  return (
    <Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
      <PageHeader level="h2" title={t("connectedAccounts")} description={t("connectedAccountsBody")}
        actions={<Button variant="outlined" onClick={() => navigate("/settings")}>{t("connectedAccountsBack")}</Button>} />
      <EmailProviderConnections />
    </Box>
  );
}