interface ModalProps {
  isOpen?: boolean; // 모달이 열려있는지 여부
  onClose?: () => void; // 외부 클릭 또는 버튼으로 닫을 때 실행
  children: React.ReactNode; // 제목이나 설명 텍스트, 아이콘 등 컨텐츠
  isSecondary?: boolean; // 두 번째 모달 여부
  isThird?: boolean;  // 세 번째 모달 여부
  onActionClick?: (payload?: { rating: number; content: string }) => void; // '작성하기'/'취소하기' 버튼 누를 때 호출
}

// 세 모달을 렌더링하는 컴포넌트
export const ModalContainer = () => {
  const [isFirstModalOpen, setIsFirstModalOpen] = useState(true);
  const [isSecondModalOpen, setIsSecondModalOpen] = useState(true);
  const [isThirdModalOpen, setIsThirdModalOpen] = useState(true);

  return (
    <div>
      <Modal isOpen={isFirstModalOpen} onClose={() => setIsFirstModalOpen(false)}>
        <h2></h2>
      </Modal>

      <Modal
        isOpen={isSecondModalOpen}
        onClose={() => setIsSecondModalOpen(false)}
        isSecondary={true}
      >
        <img src={WarningIcon} className={styles.warningIcon} alt="warning" />
      </Modal>

      <Modal isOpen={isThirdModalOpen} onClose={() => setIsThirdModalOpen(false)} isThird={true}>
        <h2></h2>
      </Modal>
    </div>
  );
};

export default Modal;