import { List } from "react-content-loader";
import BarLoader from "react-spinners/BarLoader";
import { useTranslation } from "react-i18next";
import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap";

const LoadingLayer = ({ text }: { text: string }) => {
  return (
    <Row className="g-0">
      <Col className="m-1">
        <ListGroup>
          <Badge>{text}</Badge>
          <ListGroupItem>
            <BarLoader width="100%" color="#36d7b7" />
          </ListGroupItem>
        </ListGroup>
      </Col>
    </Row>
  );
};

export const TossViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toToss")} />;
};

export const NoteViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toNote")} />;
};

export const SiteViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toSite")} />;
};

export const AvatarViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toAvatar")} />;
};

export const HOFViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toHOF")} />;
};

export const EtcViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toEtc")} />;
};

export const NoteLoading = () => {
  return (
    <ListGroupItem>
      <List />
    </ListGroupItem>
  );
};

export const HOFLoading = () => {
  return (
    <ListGroupItem>
      <BarLoader width="100%" color="#36d7b7" />
    </ListGroupItem>
  );
};

export const AvatarLoading = () => {
  return (
    <ListGroupItem>
      <BarLoader width="100%" color="#36d7b7" />
    </ListGroupItem>
  );
};