commerce/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx

import { Box, Stack, Image, Text } from "@chakra-ui/react";
import screenfull from "screenfull";

export default function ImageCardContent(props: {
    style: any
    resourcePath: string
    resourceCaption: string
  }) { 

    return (
        <>
            <Box
              className={props.style.imageContainer}
              w={'full'}
              height={'220px'}
              >
                
                <Image cursor={'pointer'} onClick={() => openFullScreen('resource-image')} id='resource-image' alt='Resource Image Not Found' src={props.resourcePath} />
            
            </Box>
            
            <Box 
              p={5}
              className={props.style.captionContainer}>
              
              <Stack mt={6} align={'center'}>
                <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
                  {props.resourceCaption}
                </Text>
              </Stack>
            </Box>
        </>
    )
};

const openFullScreen = (imageId: string) => {
    if (screenfull.isEnabled) {
        screenfull.request(document.getElementById(imageId)!);
    }
}