import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { Button } from "@mui/material";
import { Link } from "react-router";

export function NotLinkedAccountMessage(): React.ReactElement {
  return (
    <div
      style={{
        flex: 1,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
      }}
    >
      <div style={{ marginBottom: "50px" }}>
        Your Matrix account is not linked yet!
      </div>
      <Link to={"/matrix_link"}>
        <Button variant="outlined" startIcon={<ArrowForwardIcon />}>
          Go to Matrix Link settings
        </Button>
      </Link>
    </div>
  );
}