let knowledgeData = [
    {
      id: "1",
      status: "1",
      title: "Assessment on Special Education",
      challenge: "Challenge yourself & climb the leaderboard.",
      question: "Subjective Question",
      img: "../../assets/knowledge1.jpg"
    },
    {
      id: "2",
      status: "1",
      title: "Quiz on Children Psychology",
      challenge: "Challenge yourself & climb the leaderboard.",
      question: "MCQ",
      img: "../../assets/knowledge2.jpg"
    },
    {
      id: "3",
      status: "1",
      title: "Quiz on Montessori Methods",
      challenge: "Challenge yourself & climb the leaderboard.",
      question: "MCQ",
      img: "../../assets/knowledge3.jpg"
    }
];

export default function(){
    return(
        <section className=''>
            <div className=''>
                <div className=''>
                    <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>   
                    <div className='flex flex-col gap-6'>
                        {knowledgeData.map(data => (
                            <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
                                <div className='flex flex-row justify-between gap-6'>
                                    <img src={data.img} alt="" />
                                    <div className='flex flex-col space-y-3'>
                                    <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
                                    <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
                                    <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
                                </div>
                                </div>
                                <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
                            </div>
                        ))}
                    </div>                             
                </div>
               
            </div>
        </section> 
    )
}