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.attachment && prop.imageLink.attachment.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.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/>
                ) : (
                    prop.imageLink && prop.imageLink.attachment && (
                        <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.attachment} alt="Image Preview" width="auto"  height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
                        </Box>
                    )
                )}
            </Stack>
        </>
    )

}
export default ImageContent;