import {Layout, Menu, theme, Button, Modal, MenuProps, Tabs} from 'antd';
import '../../public/assets/knowledge-quest.css';
const { TabPane } = Tabs;
let performersData = [
    {
        id: "1",
        name: "Eiden",
        score: "48/50",
        points: "999",
        rank: "1",
        program: "Graduate Program",
        avatar: "avatar1.png"
    },
    {
        id: "2",
        name: "Jackson",
        score: "45/50",
        points: "997",
        rank: "2",
        program: "Graduate Program",
        avatar: "avatar2.png"
    },
    {
        id: "3",
        name: "Emma Aria",
        score: "43/50",
        points: "994",
        rank: "3",
        program: "Graduate Program",
        avatar: "avatar3.png"
    },
    {
        id: "4",
        name: "John Doe",
        score: "40/50",
        points: "990",
        rank: "4",
        program: "Graduate Program",
        avatar: "avatar4.png"
    },
    {
        id: "5",
        name: "Jane Cooper",
        score: "37/50",
        points: "987",
        rank: "5",
        program: "Graduate Program",
        avatar: "avatar5.png"
    },
    {
        id: "6",
        name: "John Doe",
        score: "35/50",
        points: "982",
        rank: "6",
        program: "Graduate Program",
        avatar: "avatar6.png"
    },
    {
        id: "7",
        name: "Alice",
        score: "33/50",
        points: "980",
        rank: "7",
        program: "Graduate Program",
        avatar: "avatar1.png"
    },
    {
        id: "8",
        name: "Bob",
        score: "32/50",
        points: "978",
        rank: "8",
        program: "Graduate Program",
        avatar: "avatar2.png"
    },
    {
        id: "9",
        name: "Charlie",
        score: "30/50",
        points: "975",
        rank: "9",
        program: "Graduate Program",
        avatar: "avatar3.png"
    },
    {
        id: "10",
        name: "Diana",
        score: "28/50",
        points: "972",
        rank: "10",
        program: "Graduate Program",
        avatar: "avatar4.png"
    },
    {
        id: "11",
        name: "Edward",
        score: "27/50",
        points: "970",
        rank: "11",
        program: "Graduate Program",
        avatar: "avatar5.png"
    },
    {
        id: "12",
        name: "Fiona",
        score: "26/50",
        points: "968",
        rank: "12",
        program: "Graduate Program",
        avatar: "avatar6.png"
    },
    {
        id: "13",
        name: "George",
        score: "25/50",
        points: "965",
        rank: "13",
        program: "Graduate Program",
        avatar: "avatar1.png"
    },
    {
        id: "14",
        name: "Hannah",
        score: "23/50",
        points: "962",
        rank: "14",
        program: "Graduate Program",
        avatar: "avatar2.png"
    },
    {
        id: "15",
        name: "Ian",
        score: "22/50",
        points: "960",
        rank: "15",
        program: "Graduate Program",
        avatar: "avatar3.png"
    },
    {
        id: "16",
        name: "Julia",
        score: "20/50",
        points: "957",
        rank: "16",
        program: "Graduate Program",
        avatar: "avatar4.png"
    },
    {
        id: "17",
        name: "Kyle",
        score: "19/50",
        points: "955",
        rank: "17",
        program: "Graduate Program",
        avatar: "avatar5.png"
    },
    {
        id: "18",
        name: "Laura",
        score: "18/50",
        points: "953",
        rank: "18",
        program: "Graduate Program",
        avatar: "avatar6.png"
    },
    {
        id: "19",
        name: "Michael",
        score: "17/50",
        points: "950",
        rank: "19",
        program: "Graduate Program",
        avatar: "avatar1.png"
    },
    {
        id: "20",
        name: "Nancy",
        score: "16/50",
        points: "947",
        rank: "20",
        program: "Graduate Program",
        avatar: "avatar2.png"
    },
    {
        id: "21",
        name: "Oliver",
        score: "15/50",
        points: "945",
        rank: "21",
        program: "Graduate Program",
        avatar: "avatar3.png"
    }
];
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"
    },
    {
        id: "4",
        status: "1",
        title: "Assessment on Special Education",
        challenge: "Challenge yourself & climb the leaderboard.",
        question: "Subjective Question",
        img: "../../assets/knowledge1.jpg"
    },
    {
        id: "5",
        status: "1",
        title: "Quiz on Children Psychology",
        challenge: "Challenge yourself & climb the leaderboard.",
        question: "MCQ",
        img: "../../assets/knowledge2.jpg"
    },
    {
        id: "6",
        status: "1",
        title: "Quiz on Montessori Methods",
        challenge: "Challenge yourself & climb the leaderboard.",
        question: "MCQ",
        img: "../../assets/knowledge3.jpg"
    },
    {
        id: "7",
        status: "1",
        title: "Workshop on Child Development",
        challenge: "Expand your knowledge & earn badges.",
        question: "Interactive Session",
        img: "../../assets/knowledge1.jpg"
    },
    {
        id: "8",
        status: "1",
        title: "Webinar on Educational Psychology",
        challenge: "Join & enhance your skills.",
        question: "Discussion",
        img: "../../assets/knowledge2.jpg"
    },
    {
        id: "9",
        status: "1",
        title: "Seminar on Inclusive Education",
        challenge: "Participate & gain insights.",
        question: "Lecture",
        img: "../../assets/knowledge3.jpg"
    },
    {
        id: "10",
        status: "1",
        title: "Course on Early Childhood Education",
        challenge: "Complete the course & get certified.",
        question: "Multiple Modules",
        img: "../../assets/knowledge1.jpg"
    },
    {
        id: "11",
        status: "1",
        title: "Training on Classroom Management",
        challenge: "Improve your teaching strategies.",
        question: "Practical Tasks",
        img: "../../assets/knowledge2.jpg"
    },
    {
        id: "12",
        status: "1",
        title: "Lecture on Cognitive Development",
        challenge: "Expand your understanding & get certified.",
        question: "Q&A Session",
        img: "../../assets/knowledge3.jpg"
    },
    {
        id: "13",
        status: "1",
        title: "Workshop on Behavioral Issues",
        challenge: "Join & learn from experts.",
        question: "Interactive Session",
        img: "../../assets/knowledge1.jpg"
    },
    {
        id: "14",
        status: "1",
        title: "Seminar on Learning Disabilities",
        challenge: "Participate & enhance your knowledge.",
        question: "Lecture",
        img: "../../assets/knowledge2.jpg"
    },
    {
        id: "15",
        status: "1",
        title: "Webinar on Child Psychology",
        challenge: "Join & expand your skills.",
        question: "Discussion",
        img: "../../assets/knowledge3.jpg"
    },
    {
        id: "16",
        status: "1",
        title: "Course on Special Education Needs",
        challenge: "Complete the course & get certified.",
        question: "Multiple Modules",
        img: "../../assets/knowledge1.jpg"
    },
    {
        id: "17",
        status: "1",
        title: "Training on Autism Spectrum Disorder",
        challenge: "Improve your teaching strategies.",
        question: "Practical Tasks",
        img: "../../assets/knowledge2.jpg"
    },
    {
        id: "18",
        status: "1",
        title: "Lecture on Emotional Development",
        challenge: "Expand your understanding & get certified.",
        question: "Q&A Session",
        img: "../../assets/knowledge3.jpg"
    },
    {
        id: "19",
        status: "1",
        title: "Workshop on ADHD",
        challenge: "Join & learn from experts.",
        question: "Interactive Session",
        img: "../../assets/knowledge1.jpg"
    },
    {
        id: "20",
        status: "1",
        title: "Seminar on Speech and Language Disorders",
        challenge: "Participate & enhance your knowledge.",
        question: "Lecture",
        img: "../../assets/knowledge2.jpg"
    },
    {
        id: "21",
        status: "1",
        title: "Webinar on Child Nutrition",
        challenge: "Join & expand your skills.",
        question: "Discussion",
        img: "../../assets/knowledge3.jpg"
    }
];
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));

const highestRank = sortedData[0];
const secondHighestRank = sortedData[1];
const thirdHighestRank = sortedData[2];

export default function Index(){
    return(
        <section className='container mx-auto my-16'>
            <div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
                <div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
                    <div className=''>
                        <Tabs className='' defaultActiveKey="1"  >
                            <TabPane className='' tab="All" key="1">
                                <div className='flex flex-col gap-6'>
                                    {knowledgeData.map(data => (
                                        <div key={data.id} className='flex flex-col lg: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>        
                            </TabPane>
                            <TabPane tab="Completed" key="2">
                                <div className='flex flex-col gap-6'>
                                    {knowledgeData.map(data => (
                                        <div key={data.id} className='flex flex-col lg: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} | 200 people have taken this quiz</p>
                                                <div className='flex flex-col md:flex-row gap-x-20'>
                                                    <p className='text-[14px] font-[600]'>Score: 9/10</p>
                                                    <p className='text-[14px] font-[600] inline-flex place-items-center'>Earned: 9 &nbsp;<img src="../../assets/points-icon.svg" alt="" /></p>
                                                </div>
                                            </div>
                                            </div>
                                            <p className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</p>
                                        </div>
                                    ))}
                                </div>        
                            </TabPane>
                        </Tabs>
                    </div>                                
                </div>
                <div className='xl:col-span-2'>
                    <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
                    <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
                    <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
                        <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
                            <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
                                <img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
                                <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
                            </div>
                            <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
                            <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
                        </div>
                        <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
                            <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
                                <img className='-mt-10' src="../../assets/crown.png" alt="" />
                                <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
                                <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
                            </div>
                            <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
                            <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
                        </div>
                        <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
                            <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
                                <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
                                <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
                            </div>
                            <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
                            <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
                        </div>
                    </div>
                    <div className='flex flex-col'>
                        {sortedData.slice(3).map(data => (
                            <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2 hover:bg-[#FDF2E7] duration-700'>
                                <p className='text-[11px] font-[700]'># {data.rank}</p>
                                <img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
                                <div>
                                    <p className='text-[14px] font-[700]'>{data.name}</p>
                                    <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
                                </div>
                                <div className='flex flex-col justify-center place-items-center'>
                                    <img src="../../assets/points-icon.svg" alt="" />
                                    <p className='text-[10px] font-[700]'>{data.points} Points</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>  
    )
}