import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import AvatarPlaceText from "@/components/AvatarPlaceText";
import { wwwAPIPath } from "@/utilities/wwwAPI";
import Image from "next/image";
import Card from "react-bootstrap/Card";
import CardBody from "react-bootstrap/CardBody";
import CardFooter from "react-bootstrap/CardFooter";
import CardHeader from "react-bootstrap/CardHeader";

export default function AbilityClassView({
  avatar,
  inputMode,
}: {
  avatar: GetAvatar;
  inputMode: "5K" | "7K" | "9K";
}) {
  const avatarAbility = avatar[`avatarAbility${inputMode}`];
  const avatarAbilityPlace = avatar[`avatarAbility${inputMode}Place`];
  const avatarAbilityCount = avatar[`avatarAbility${inputMode}Count`];
  const avatarAbilityText = avatar[`avatarAbility${inputMode}Text`];

  return (
    <Card>
      <CardHeader>
        <Image
          alt=""
          src={`${wwwAPIPath}/drawing?abilityClass${inputMode}=${avatarAbility}`}
          width={96}
          height={96}
        />
      </CardHeader>
      <CardBody>
        <AvatarPlaceText
          avatarPlace={avatarAbilityPlace}
          avatarCount={avatarAbilityCount}
        />
      </CardBody>
      <CardFooter>{avatarAbilityText} Point</CardFooter>
    </Card>
  );
}