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

export default function MainView({ avatar }: { avatar: GetAvatar }) {
  const t = useTranslations();

  return (
    <Card>
      <CardHeader>
        <Stack gap={2} direction="horizontal">
          <AvatarDrawing avatarID={avatar.avatarID} />
          <Stack gap={2}>
            <Stack gap={2} direction="horizontal">
              <AvatarTitle avatarID={avatar.avatarID} />
              {avatar.avatarName} ({avatar.avatarID})
            </Stack>
            LV. {avatar.avatarLevel}
            <ProgressBar now={(100 * avatar.avatarXP) / avatar.totalAvatarXP} />
          </Stack>
        </Stack>
      </CardHeader>
      <CardBody>
        <Stack gap={2}>
          <Stack gap={2} direction="horizontal">
            {t("totalCountText", {
              totalCount: avatar.totalCount,
            })}
          </Stack>
          <span>{t("topCountText", { topCount: avatar.topCount })}</span>
          <span>{avatar.totalLength}</span>
        </Stack>
      </CardBody>
      <CardFooter>{t("avatarDate", { date: avatar.date })}</CardFooter>
    </Card>
  );
}