import {forwardRef} from "@wordpress/element";
import {Center, Image, Stack, Text} from "@mantine/core";
import cx from "clsx";
import classes from "./AppzalLoader.module.css";
import AppzaIcon from "../../../assets/images/appza-iocn.svg";

export const Initial = ({imageWidth, height, text}) => {

    return(
        <Center h={`100vh`}>
            <Stack gap="xs" align="center">
                <Image className={classes.initialLoader} w={50} src={AppzaIcon}/>
                <Text fs="italic" size="xs">Preparing...</Text>
            </Stack>
        </Center>
    );
}

Initial.defaultProps = {
    imageWidth: 50,
    height: '100%',
    text: 'Loading...',
}


export const CssLoader = forwardRef(({ className, ...others }, ref) => (
    <Image src={AppzaIcon} className={cx(classes.loader, className)} {...others} ref={ref}/>
));