'use client'

import { useRecoilState, useRecoilValue } from 'recoil'

import { Modal } from 'react-responsive-modal'

import { modalContent, modalState } from '@/store/modalAtom'

import 'react-responsive-modal/styles.css'

export default function QModal() {
  const [open, setOpen] = useRecoilState(modalState)
  const children = useRecoilValue(modalContent)

  return (
    <Modal open={open} onClose={() => setOpen(false)} center>
      {children}
    </Modal>
  )
}
