import React, { FC } from "react";
import { Aligment, Card, Loader, Text } from "venice-ui";
import {
  ContentLoading,
  ContentLoadingWrapper,
  LoaderWrapper,
} from "../components";
import logo from ".././../weldingApp_logo_white.svg";
import { WelcomeLogo } from "../SingIn/Login.styles";
import { GlobalLoaderWrapper } from "../publicComponents";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";

export const LoadingContent: FC = () => {
  return (
    <ContentLoadingWrapper>
      <Card shadow={false}>
        <ContentLoading>
          <LoaderWrapper>
            <Loader size="lg" />
          </LoaderWrapper>
          <Aligment justify="center" align="center" vPadding="16px">
            <Text>{t(dictionary.loading)}</Text>
          </Aligment>
        </ContentLoading>
      </Card>
    </ContentLoadingWrapper>
  );
};

export const GlobalLoadingPage: FC = () => {
  return (
    <GlobalLoaderWrapper>
      <WelcomeLogo src={logo} />
      <Loader size="lg" />
    </GlobalLoaderWrapper>
  );
};