import Modal from "@scandic-hotels/design-system/Modal"

import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import styles from "./wrapper.module.css"

export default function AncillaryFlowModalWrapper({
  children,
}: React.PropsWithChildren) {
  const { isOpen, closeModal, selectedAncillaryTitle } = useAddAncillaryStore(
    (state) => ({
      isOpen: state.isOpen,
      closeModal: state.closeModal,
      selectedAncillaryTitle: state.selectedAncillary?.title,
    })
  )
  return (
    <Modal isOpen={isOpen} onToggle={closeModal} title={selectedAncillaryTitle}>
      <div className={styles.modalWrapper}>{children}</div>
    </Modal>
  )
}