import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import { useTranslations } from "next-intl";
import Card from "react-bootstrap/Card";
import CardBody from "react-bootstrap/CardBody";
import CardHeader from "react-bootstrap/CardHeader";

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

  if (!avatarIntro) {
    return null;
  }

  return (
    <Card>
      <CardHeader>{t("avatarIntroText")}</CardHeader>
      <CardBody>
        <span style={{ whiteSpace: "break-spaces" }}>{avatarIntro}</span>
      </CardBody>
    </Card>
  );
}