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

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

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

  return (
    <ListGroup>
      <Badge>{t("toToss")}</Badge>
      <ListGroupItem>
        <BarLoader width="100%" color="#36d7b7" />
      </ListGroupItem>
    </ListGroup>
  );
};

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

  return (
    <ListGroup>
      <Badge>{t("toNote")}</Badge>
      <ListGroupItem>
        <BarLoader width="100%" color="#36d7b7" />
      </ListGroupItem>
    </ListGroup>
  );
};

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

  return (
    <ListGroup>
      <Badge>{t("toSite")}</Badge>
      <ListGroupItem>
        <BarLoader width="100%" color="#36d7b7" />
      </ListGroupItem>
    </ListGroup>
  );
};

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

  return (
    <ListGroup>
      <Badge>{t("toAvatar")}</Badge>
      <ListGroupItem>
        <BarLoader width="100%" color="#36d7b7" />
      </ListGroupItem>
    </ListGroup>
  );
};

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

  return (
    <ListGroup>
      <Badge>{t("toWow")}</Badge>
      <ListGroupItem>
        <BarLoader width="100%" color="#36d7b7" />
      </ListGroupItem>
    </ListGroup>
  );
};

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

  return (
    <ListGroup>
      <Badge>{t("toEtc")}</Badge>
      <ListGroupItem>
        <BarLoader width="100%" color="#36d7b7" />
      </ListGroupItem>
    </ListGroup>
  );
};