import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Alert, AlertTitle } from "@material-ui/lab";
import styles from "../styles";
import { useTranslation } from "react-i18next";
import { useTuitioUser } from "@flare/tuitio-client-react";

const useStyles = makeStyles(styles);

export default function UserAnnouncement() {
  const classes = useStyles();
  const { t } = useTranslation();
  const { userName } = useTuitioUser();

  return (
    <div className={classes.alert}>
      <Alert variant="outlined" severity="info">
        <AlertTitle>
          {t("Dashboard.Announcements.User.Title", {
            userName
          })}
        </AlertTitle>
        {t("Dashboard.Announcements.User.Message")}
      </Alert>
    </div>
  );
}