import AvatarDrawing from "@/components/AvatarDrawing";
import { Col, ListGroupItem, Row } from "reactstrap";

export const NoteLoading = ({ loadingCount }: { loadingCount: number }) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <ListGroupItem key={i}>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <span className="title">Loading...</span>
          <br />
          <br />
        </Col>
      </Row>
    </ListGroupItem>
  ));
};

export const WwwLevelLoading = ({ loadingCount }: { loadingCount: number }) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <ListGroupItem key={i}>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <span>Loading...</span>
        </Col>
      </Row>
    </ListGroupItem>
  ));
};

export const AvatarLoading = ({ loadingCount }: { loadingCount: number }) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <ListGroupItem key={i}>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <AvatarDrawing avatarID="" />
        </Col>
        <Col className="m-1" xs="auto">
          <span>Loading...</span>
        </Col>
      </Row>
    </ListGroupItem>
  ));
};