import { Badge, ListGroup, ListGroupItem } from "reactstrap";

import { GetAvatar } from "@/avatar/useGetAvatar";
import { useTranslations } from "next-intl";

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

  if (!avatarIntro) {
    return null;
  }

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