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

const ImageContent = (prop) => {

    useEffect(() => {
        const timer = setTimeout(() => {
            prop.setIsSkeleton(false);
        }, 1500);
        return () => clearTimeout(timer);
    }, [prop.isSkeleton]);
    const isPDF = prop.imageLink && prop.imageLink.file && prop.imageLink.file.endsWith('.pdf');
    return (
        <>
            <Stack sx={{width: "100%"}}>
                {prop.isSkeleton && (
                    <Box sx={{
                        display: 'flex',
                        justifyContent: 'center',
                        border: '1px solid #ccc',
                        p: 5,
                        height: '700px',
                        borderRadius: '8px',
                        width: '100%'
                    }}>
                        <Skeleton variant="rectangular" animation="wave" sx={{width: '100%', height: '100%'}}/>
                    </Box>
                )}
                {isPDF ? (
                    <embed src={prop.imageLink.file} type="application/pdf" width="100%" height="700px"
                           style={{display: prop.isSkeleton ? 'none' : 'block'}}/>
                ) : (
                    prop.imageLink && prop.imageLink.file && (
                        <Box sx={{
                            display: prop.isSkeleton ? 'none' : 'flex',
                            justifyContent: 'center',
                            border: '1px solid #ccc',
                            p: 5,
                            height: '700px',
                            borderRadius: '8px',
                        }}>
                            <Box component="img" src={prop.imageLink.file} alt="Image Preview" width="auto"
                                 height="auto" sx={{maxHeight: '700px', maxWidth: '100%'}}></Box>
                        </Box>
                    )
                )}
            </Stack>
        </>
    )

}
export default ImageContent;