let quizModuleData = {
    modules: [
      {
        moduleId: 1,
        type: "Theory Quiz Scores",
        moduleName: "Module 1 - Life History of Dr. Maria Montessori",
        quizzes: [
          {
            quizId: 1,
            quizName: "Lorem Ipsum Dolor Sit",
            attendQuestion: 48,
            totalQuestion: 50,
            internalMarks: 28,
            attendance: 20,
            questions: [
              {
                questionId: 1,
                questionText: "What is the capital of France?",
                options: [
                  "Paris",
                  "London",
                  "Berlin",
                  "Madrid"
                ],
                correctAnswer: "Paris"
              },
              {
                questionId: 2,
                questionText: "What is 2 + 2?",
                options: [
                  "3",
                  "4",
                  "5",
                  "6"
                ],
                correctAnswer: "4"
              },
              {
                questionId: 3,
                questionText: "What is the boiling point of water?",
                options: [
                  "90°C",
                  "100°C",
                  "110°C",
                  "120°C"
                ],
                correctAnswer: "100°C"
              },
              {
                questionId: 4,
                questionText: "Who wrote 'To Kill a Mockingbird'?",
                options: [
                  "Harper Lee",
                  "Mark Twain",
                  "J.K. Rowling",
                  "Ernest Hemingway"
                ],
                correctAnswer: "Harper Lee"
              },
              {
                questionId: 5,
                questionText: "What is the largest planet in our solar system?",
                options: [
                  "Earth",
                  "Mars",
                  "Jupiter",
                  "Saturn"
                ],
                correctAnswer: "Jupiter"
              },
              {
                questionId: 6,
                questionText: "What is the speed of light?",
                options: [
                  "300,000 km/s",
                  "150,000 km/s",
                  "100,000 km/s",
                  "50,000 km/s"
                ],
                correctAnswer: "300,000 km/s"
              },
              {
                questionId: 7,
                questionText: "Who painted the Mona Lisa?",
                options: [
                  "Vincent van Gogh",
                  "Pablo Picasso",
                  "Leonardo da Vinci",
                  "Claude Monet"
                ],
                correctAnswer: "Leonardo da Vinci"
              },
              {
                questionId: 8,
                questionText: "What is the chemical symbol for gold?",
                options: [
                  "Au",
                  "Ag",
                  "Pt",
                  "Pb"
                ],
                correctAnswer: "Au"
              },
              {
                questionId: 9,
                questionText: "What is the tallest mountain in the world?",
                options: [
                  "K2",
                  "Kangchenjunga",
                  "Mount Everest",
                  "Lhotse"
                ],
                correctAnswer: "Mount Everest"
              },
              {
                questionId: 10,
                questionText: "What is the smallest unit of life?",
                options: [
                  "Cell",
                  "Atom",
                  "Molecule",
                  "Organ"
                ],
                correctAnswer: "Cell"
              }
            ]
          },
          {
            quizId: 2,
            quizName: "Lorem Ipsum Dolor Sit",
            attendQuestion: 45,
            totalQuestion: 50,
            internalMarks: 29,
            attendance: 20,
            questions: [
              {
                questionId: 1,
                questionText: "What is the capital of Italy?",
                options: [
                  "Rome",
                  "Venice",
                  "Florence",
                  "Milan"
                ],
                correctAnswer: "Rome"
              },
              {
                questionId: 2,
                questionText: "What is 3 + 5?",
                options: [
                  "7",
                  "8",
                  "9",
                  "10"
                ],
                correctAnswer: "8"
              },
              {
                questionId: 3,
                questionText: "What is the freezing point of water?",
                options: [
                  "0°C",
                  "32°C",
                  "100°C",
                  "273K"
                ],
                correctAnswer: "0°C"
              },
              {
                questionId: 4,
                questionText: "Who wrote 'Pride and Prejudice'?",
                options: [
                  "Jane Austen",
                  "Charles Dickens",
                  "Emily Brontë",
                  "George Eliot"
                ],
                correctAnswer: "Jane Austen"
              },
              {
                questionId: 5,
                questionText: "What is the smallest planet in our solar system?",
                options: [
                  "Mercury",
                  "Venus",
                  "Earth",
                  "Mars"
                ],
                correctAnswer: "Mercury"
              },
              {
                questionId: 6,
                questionText: "What is the speed of sound?",
                options: [
                  "343 m/s",
                  "300 m/s",
                  "1500 m/s",
                  "1000 m/s"
                ],
                correctAnswer: "343 m/s"
              },
              {
                questionId: 7,
                questionText: "Who painted the Starry Night?",
                options: [
                  "Vincent van Gogh",
                  "Pablo Picasso",
                  "Leonardo da Vinci",
                  "Claude Monet"
                ],
                correctAnswer: "Vincent van Gogh"
              },
              {
                questionId: 8,
                questionText: "What is the chemical symbol for silver?",
                options: [
                  "Au",
                  "Ag",
                  "Pt",
                  "Pb"
                ],
                correctAnswer: "Ag"
              },
              {
                questionId: 9,
                questionText: "What is the second tallest mountain in the world?",
                options: [
                  "K2",
                  "Kangchenjunga",
                  "Mount Everest",
                  "Lhotse"
                ],
                correctAnswer: "K2"
              },
              {
                questionId: 10,
                questionText: "What is the largest organ in the human body?",
                options: [
                  "Liver",
                  "Heart",
                  "Skin",
                  "Brain"
                ],
                correctAnswer: "Skin"
              }
            ]
          }
        ]
      },
      {
        moduleId: 2,
        type: "Theory Quiz Scores",
        moduleName: "Module 2",
        attendQuestion: 42,
        totalQuestion: 50,
        internalMarks: 22,
        attendance: 20,
        quizzes: [
          {
            quizId: 1,
            quizName: "Quiz 1",
            attendQuestion: 49,
            totalQuestion: 50,
            internalMarks: 2,
            attendance: 20,
            questions: [
              {
                questionId: 1,
                questionText: "What is the capital of Germany?",
                options: [
                  "Berlin",
                  "Munich",
                  "Hamburg",
                  "Frankfurt"
                ],
                correctAnswer: "Berlin"
              },
              {
                questionId: 2,
                questionText: "What is 5 + 3?",
                options: [
                  "7",
                  "8",
                  "9",
                  "10"
                ],
                correctAnswer: "8"
              },
              {
                questionId: 3,
                questionText: "What is the melting point of ice?",
                options: [
                  "0°C",
                  "32°C",
                  "100°C",
                  "273K"
                ],
                correctAnswer: "0°C"
              },
              {
                questionId: 4,
                questionText: "Who wrote '1984'?",
                options: [
                  "George Orwell",
                  "Aldous Huxley",
                  "Ray Bradbury",
                  "J.D. Salinger"
                ],
                correctAnswer: "George Orwell"
              },
              {
                questionId: 5,
                questionText: "What is the second smallest planet in our solar system?",
                options: [
                  "Mercury",
                  "Venus",
                  "Earth",
                  "Mars"
                ],
                correctAnswer: "Mars"
              },
              {
                questionId: 6,
                questionText: "What is the speed of light in a vacuum?",
                options: [
                  "300,000 km/s",
                  "150,000 km/s",
                  "299,792 km/s",
                  "299,792 m/s"
                ],
                correctAnswer: "299,792 km/s"
              },
              {
                questionId: 7,
                questionText: "Who painted the Last Supper?",
                options: [
                  "Vincent van Gogh",
                  "Pablo Picasso",
                  "Leonardo da Vinci",
                  "Claude Monet"
                ],
                correctAnswer: "Leonardo da Vinci"
              },
              {
                questionId: 8,
                questionText: "What is the chemical symbol for iron?",
                options: [
                  "Fe",
                  "Ir",
                  "In",
                  "I"
                ],
                correctAnswer: "Fe"
              },
              {
                questionId: 9,
                questionText: "What is the third tallest mountain in the world?",
                options: [
                  "K2",
                  "Kangchenjunga",
                  "Mount Everest",
                  "Lhotse"
                ],
                correctAnswer: "Kangchenjunga"
              },
              {
                questionId: 10,
                questionText: "What is the smallest bone in the human body?",
                options: [
                  "Stapes",
                  "Femur",
                  "Tibia",
                  "Fibula"
                ],
                correctAnswer: "Stapes"
              }
            ]
          }
        ]
      }
    ]
}
console.log(quizModuleData)
import React, { useState } from 'react';
import { Modal } from 'antd';


export default function Index() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedQuiz, setSelectedQuiz] = useState(null);

  const showModal = (quiz) => {
    setSelectedQuiz(quiz);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
    setSelectedQuiz(null);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setSelectedQuiz(null);
  };

  return (
    <section className="">
        <div className="flex flex-col">
            {
                quizModuleData.modules.map((moduleData) => (
                    <div key={moduleData.moduleId}>
                    <div className="p-6">
                        <p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
                        <p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
                        <p className="text-[14px] font-[600]">3/8 Quizzes Completed </p>
                    </div>
                    <div className="flex flex-col">
                        {
                            moduleData.quizzes.map((quizData) => (
                                <div onClick={() => showModal(quizData)} className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer" key={quizData.quizId}>
                                    <div className="flex flex-col space-y-2">
                                        <h3 className="text-[20px] font-[700]">#{quizData.quizId} {quizData.quizName}</h3>
                                        <p className="text-[16px] font-[700] text-[#6E6E6E]">
                                        <span>Internal Marks:  {quizData.internalMarks}</span> &nbsp;&#8226; &nbsp;
                                        <span>Attendance:  {quizData.attendance}</span>
                                        </p>
                                    </div>
                                    <div className="flex flex-row space-x-4">
                                        <p className="bg-[#FFE2C7] p-2 rounded-[8px]">
                                        <span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
                                        <span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
                                        </p>
                                        <img src="../../assets/right-arrow.svg" alt="" />
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                    </div>
                ))
            }
        </div>
        {selectedQuiz && (
            <Modal title={selectedQuiz.quizName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000}>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-b-[1px] border-b-[#CFCFCF]">
                        <div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
                            <div className="flex flex-row space-x-2">
                                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                                    <img className=" " src="../../assets/calendar.svg" alt="" />
                                </div>
                                <div className='flex flex-col'>
                                    <p className="text-[20px] font-[800]">18/10</p>
                                    <p className="text-[14px] font-[600] text-[#414141]">Attendance</p>
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
                            <div className="flex flex-row space-x-2">
                                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                                    <img className=" " src="../../assets/note.svg" alt="" />
                                </div>
                                <div className='flex flex-col'>
                                    <p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Questions</span></p>
                                    <p className="text-[14px] font-[600] text-[#414141]">Attempted</p>
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-center place-items-center my-3">
                            <div className="flex flex-row space-x-2">
                                <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                                    <img className=" " src="../../assets/note.svg" alt="" />
                                </div>
                                <div className='flex flex-col'>
                                    <p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Correct</span></p>
                                    <p className="text-[14px] font-[600] text-[#414141]">Attempts</p>
                                </div>
                            </div>
                        </div>
                    </div>
              {selectedQuiz.questions.map((questionData) => (
                  <div key={questionData.questionId} className="mb-4 px-10 flex flex-col space-y-2">
                      <p className='text-[20px] font-[700]'>Q{questionData.questionId}: {questionData.questionText}</p>
                      <p className="text-[16px] font-[600] text-[#EF7A0C]">Your Answer</p>
                      <p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
                      <div className='inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3'>
                          <p className='text-[14px] font-[700] text-[#218B32] inline-flex place-items-center'><img src="../../assets/green-tick.svg" alt="" /> &nbsp;Correct</p>
                          <p className='text-[14px] font-[400]'> {questionData.correctAnswer}</p>
                      </div>
                  <ul>
                      {/* {questionData.options.map((option, index) => (
                      <li key={index}>{option}</li>
                      ))} */}
                  </ul>
                  </div>
              ))}
            </Modal>
        )}
    </section>
  );
}