/**
 * 📄 Modal Component
 * 모달 컴포넌트
 *
 * - 모달 열기/닫기 상태 관리
 * - 제목 및 내용 표시
 * - 저장 및 닫기 버튼 지원
 * - 반응형 크기 조정 (최대/최소 너비 및 높이)
 * - 오버레이 및 z-index를 통한 최상위 레이어 배치
 * - 접근성 지원 (aria-describedby)
 */
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