import React from "react";
import { Alert, AlertTitle } from "@mui/material";
import { getStyles } from "../styles";
import { useTranslation } from "react-i18next";
import { useTuitioUser } from "@flare/tuitio-client-react";
import { useTheme } from "@mui/material/styles";

export default function UserAnnouncement() {
  const { t } = useTranslation();
  const { userName } = useTuitioUser();
  const theme = useTheme();
  const styles = getStyles(theme);

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