'use client'

import { useRouter } from 'next/navigation'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { useEffect, useState } from 'react'

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

const Modal = ({ children, className }: Props) => {
  const [open, setOpen] = useState(false)
  const router = useRouter()

  const onOpenChange = (open: boolean) => {
    if (!open) router.back()
  }

  useEffect(() => {
    setOpen(true)
  })

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={className}>{children}</DialogContent>
    </Dialog>
  )
}

export default Modal