import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose, DialogOverlay } from '@common/components/ui'
import React from 'react'

interface ModalProps {
    isModalOpen: boolean;
    setIsModalOpen: (open: boolean) => void;
    title?: string;
    children: React.ReactNode;
    closeModal: () => void;
}

const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal }) => {
    return (
        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
            <DialogOverlay className='z-[200]'/>
            <DialogContent className="w-auto max-w-[1200px] h-auto max-h-[450px] overflow-auto z-[1000]">
                {title ? <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                </DialogHeader> : null}
                {children}
                <DialogFooter>
                    <DialogClose>
                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closeModal}>닫기</button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}

export default Modal