import React, { useEffect, useState } from 'react';
interface Performer {
    id: number;
    title: string;
    img: string;
    challenge: string;
    question: string;
}

export default function KnowledgeQuests() {
    const [knowledgeData, setData] = useState<Performer[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);


    useEffect(() => {
        fetch('https://iimtt-api.s38.siliconpin.com/api/knowledge-quests')
          .then(res => {
            if (!res.ok) {
              throw new Error('Network response was not ok');
            }
            return res.json();
          })
          .then(data => {
            setData(data);
            setLoading(false);
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            setError(error);
            setLoading(false);
          });
      }, []);
      if (loading) {
        return <div>Loading...</div>;
      }
    
      if (error) {
        return <div>Error: {error.message}</div>;
      }
    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> 
    )
}