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

import { GetAvatar } from "src/avatar/useGetAvatar";

export default function IntroView({
  avatar: { avatarIntro },
}: {
  avatar: GetAvatar;
}) {
  const { t } = useTranslation();

  if (!avatarIntro) {
    return null;
  }

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