import React from "react";
import {Button, Image, Stack, Text, useToast,} from "@chakra-ui/react";


const BabuReviewCompleted = (props: any) => {

    const {onNextFunction} = props;
    const toast = useToast();

    const next = () => {
        toast({
            title: "Review Submitted",
            description: "Thank you for your review",
            status: "success",
            duration: 3000,
            isClosable: true,
        })
        onNextFunction()
    };
    const reviewCompletedIcon =
        "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/reviewCompletdIcon.svg?alt=media&token=a7dcd929-3585-4306-958e-5bf283d5e7da";
    return (
        <>
            <Stack
                px="24px"
                spacing={"43px"}
                pt="150px"
                w="100%"
                h="100vh"
                bg="linear-gradient(179.99deg, #051E61 32.57%, #144581 83.88%, #3C636D 114.33%)"
                justifyItems={"center"}
                alignItems={"center"}
            >
                <Image w="263px" h="233.49px" src={reviewCompletedIcon}/>

                <Stack w="100%" spacing={"14px"} alignItems={"center"}>
                    <Text
                        fontSize="22px"
                        fontFamily={"ABC"}
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="28.6px"
                        letterSpacing="0.04px"
                        textAlign={"center"}
                        color="rgba(255, 255, 255, 1)"
                    >Thanks for your review!</Text>
                    <Text
                        fontSize="16px"
                        fontFamily={"MaisonMedium"}
                        fontStyle="normal"
                        fontWeight="400"
                        lineHeight="22.4px"
                        letterSpacing="0.04px"
                        color="rgba(194, 198, 214, 1)"
                        textAlign={"center"}
                    >
                        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </Text>
                </Stack>
                <Button
                    onClick={next}
                    h="54px"
                    fontSize="22px"
                    fontFamily={"ABCMedium"}
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="16px"
                    letterSpacing="0.3px"
                    bg="#43C6A1"
                    color="white"
                    padding="17px, 19px, 19px, 19px "
                    w="327px"
                    borderRadius={"12px"}
                    _hover={{
                        backgroundColor: "#43C6A1"
                    }}
                >
                    Done
                </Button>
            </Stack>
        </>
    );
};

export default BabuReviewCompleted;