import AvatarTitle from "@/components/AvatarTitle";
import { useTranslations } from "next-intl";
import { Col, ListGroupItem, Row } from "reactstrap";

export const HitViewLoading = () => {
  const t = useTranslations();

  return (
    <span>
      Loading...
      <br />
      Loading...
      <br />
      {t("hit03")}
    </span>
  );
};

export const LatestEssaysViewLoading = ({
  loadingCount,
}: {
  loadingCount: number;
}) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <ListGroupItem key={i}>
      <Row className="g-0">
        <AvatarTitle avatarID={""} avatarName={"Loading..."}>
          <span>Loading...</span>
        </AvatarTitle>
      </Row>
    </ListGroupItem>
  ));
};

export const LatestCommentsViewLoading = ({
  loadingCount,
}: {
  loadingCount: number;
}) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <ListGroupItem key={i}>
      <Row className="g-0">
        <AvatarTitle avatarID={""} avatarName={"Loading..."}>
          <span>Loading...</span>
        </AvatarTitle>
      </Row>
    </ListGroupItem>
  ));
};

export const LatestAvatarViewLoading = ({
  loadingCounts,
}: {
  loadingCounts: number[];
}) =>
  [...Array(loadingCounts[0]).keys()].map((i) => (
    <Row className="g-0" key={i}>
      {[...Array(loadingCounts[1]).keys()].map((i) => (
        <AvatarTitle key={i} avatarID={""} avatarName={"Loading..."}>
          <span>Loading...</span>
        </AvatarTitle>
      ))}
    </Row>
  ));

export const AvatarViewLoading = () => {
  return (
    <Row className="g-0">
      <AvatarTitle avatarID={""} avatarName={"Loading..."}>
        <span>Loading...</span>
      </AvatarTitle>
    </Row>
  );
};

export const AutoEssayViewLoading = () => {
  return (
    <ListGroupItem>
      <Row className="g-0">
        <Col className="m-1">
          <span>Loading...</span>
        </Col>
      </Row>
    </ListGroupItem>
  );
};