import AvatarView, {
  AvatarViewLoading,
} from "@/app/[language]/hall/components/AvatarView";
import { Hall } from "@/app/[language]/hall/type";
import { FC } from "react";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";

export default function AvatarsView({
  isLoaded,
  halls,
  Component,
}: {
  isLoaded: boolean;
  halls: Hall[];
  Component?: FC<{ value: number }>;
}) {
  return (
    <ListGroup>
      {isLoaded
        ? halls.map(({ avatarID, avatarName, text, value }, i) => (
            <ListGroupItem key={avatarID}>
              <AvatarView
                avatarID={avatarID}
                avatarName={avatarName}
                text={text}
                value={value}
                avatarPlace={i + 1}
              >
                {Component && <Component value={value} />}
              </AvatarView>
            </ListGroupItem>
          ))
        : [...Array(50).keys()].map((i) => (
            <ListGroupItem key={i}>
              <AvatarViewLoading />
            </ListGroupItem>
          ))}
    </ListGroup>
  );
}