import { Box, Skeleton } from "@mui/material";

const DialogLoading = ({ loadingOpen }) => {
    return (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, p: 2 }}>
            <Skeleton variant="text" sx={{ fontSize: "1.5rem", width: "70%" }} />
            <Skeleton variant="text" sx={{ fontSize: "1rem", width: "90%" }} />
            <Skeleton variant="rectangular" sx={{ borderRadius: "8px", height: "180px", width: "100%" }} />
            <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                <Skeleton variant="text" sx={{ fontSize: "1rem", width: "80%" }} />
                <Skeleton variant="text" sx={{ fontSize: "1rem", width: "60%" }} />
                <Skeleton variant="text" sx={{ fontSize: "1rem", width: "70%" }} />
            </Box>
            <Box sx={{ display: "flex", gap: 2, mt: 2 }}>
                <Skeleton
                    variant="rectangular"
                    sx={{
                        borderRadius: "8px",
                        height: "40px",
                        width: "30%",
                    }}
                />
                <Skeleton
                    variant="rectangular"
                    sx={{
                        borderRadius: "8px",
                        height: "40px",
                        width: "20%",
                    }}
                />
            </Box>
        </Box>
    );
};

export default DialogLoading;