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

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

const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal, saveModal }) => {
  return (
    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
      <DialogOverlay className='z-[200]' />
      <DialogContent className="w-auto max-w-[1200px] min-w-[400px] min-h-[150px] h-auto max-h-[450px] overflow-auto z-[1000]" aria-describedby={undefined}>
        {title ? <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader> : null}
        {children}
        <DialogFooter>
          <div className='flex justify-end gap-2'>
            {saveModal ? <button className="px-4 py-2 bg-primary text-white rounded" onClick={saveModal}>저장</button> : null}
            <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closeModal}>닫기</button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

export default Modal