const ModalOverlay = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; `; const ModalContent = styled.div` width: 80%; background-color: #fff; padding: 20px; border-radius: 8px; `; const CloseButton = styled.button` margin-top: 20px; display: block; margin-left: auto; `; const Modal = ({ isOpen, onClose, children }) => { if (!isOpen) return null; return ( <ModalOverlay> <ModalContent> {children} <CloseButton onClick={onClose}>Close</CloseButton> </ModalContent> </ModalOverlay> ); }; return { Modal };