import React, { useState } from 'react'; import { getCircularAvatar } from '../utils/arraysAndFuncs'; import { Header, Modal, Image } from 'semantic-ui-react'; const DisplayPictureModal = ({ imageLink, contactName, isDarkMode }) => { const [open, setOpen] = useState(false); return ( <Modal closeIcon open={open} trigger={ <Image avatar style={{ width: '49px', height: '49px' }} src={getCircularAvatar(imageLink)} className="avatar-image" /> } onClose={() => setOpen(false)} onOpen={() => setOpen(true)} className={isDarkMode ? 'dark-mode-modal' : ''} > <Header icon="picture" content={`DP Preview: ${contactName}`} /> <Modal.Content> <Image src={imageLink} size="large" rounded className="avatar-preview" /> </Modal.Content> </Modal> ); }; export default DisplayPictureModal;