'use client'
import React, { useEffect, useState } from 'react'
import { lockScrollbars } from 'lock-scrollbars'

function Modal({ open, children }) {
  const dialogRef = React.useRef(null)
  const unlockScrollbars = React.useRef(null)

  useEffect(() => {
    const dialogNode = dialogRef.current
    if (dialogNode) {
      if (open) {
        dialogNode.showModal()
        unlockScrollbars.current = lockScrollbars()
      } else {
        dialogNode.close()
        unlockScrollbars.current?.()
      }
    }
  }, [open])

  return <dialog ref={dialogRef}>{children</dialog>
}