import React, { useState } from "react";
import { Grid, Typography } from "@mui/material";

import { observer } from "mobx-react";
import { getRootStore } from "../../models/root-store.ts";

const ScreenSaver = () => {
  const [rootStore] = useState(() => getRootStore());
  return (
    <Grid style={{ marginTop: -120 }} item xs={12} sm={12} md={12} lg={12}>
      <Typography
        style={{
          color: rootStore.settings.darkMode ? "white" : "black",
          margin: 50,
          textAlign: "center",
        }}
        variant="h1"
      >
        {rootStore.languageList.t1("No vehicle")}
      </Typography>
      <Typography
        style={{
          color: rootStore.settings.darkMode ? "white" : "black",
          margin: 50,
          textAlign: "center",
        }}
        variant="h1"
      >
        {rootStore.languageList.t2("No vehicle")}
      </Typography>
      <Typography
        style={{
          color: rootStore.settings.darkMode ? "white" : "black",
          margin: 50,
          textAlign: "center",
        }}
        variant="h1"
      >
        {rootStore.languageList.t3("No vehicle")}
      </Typography>
    </Grid>
  );
};

export default observer(ScreenSaver);
