import { useTranslation } from "react-i18next";
import { observer } from "mobx-react-lite";
import { Badge, ListGroup, ListGroupItem } from "reactstrap";

import { useAvatarStore } from "src/Stores";

export default observer(() => {
  const { avatarIntro, isLoading } = useAvatarStore();

  const { t } = useTranslation();

  if (!isLoading && !avatarIntro) {
    return null;
  }

  return (
    <ListGroup>
      <Badge>{t("avatarIntroText")}</Badge>
      <ListGroupItem>
        <span className="avatarIntro">{avatarIntro}</span>
      </ListGroupItem>
    </ListGroup>
  );
});