import { Flex, Progress } from 'antd';
import React, { useEffect, useState } from 'react';
interface Performer {
  quizId: number;
  quizType: string;
  quizName: string;
  percentage: string;
}

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


    useEffect(() => {
        fetch('http://localhost:5174/api/quiz-score')
          .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>
            <div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
                <h2 className="text-[20px] font-[700] text-[#FFF] p-4">Quizzes score</h2>
                <div className="flex flex-col">
                    {quizData.slice(0, 10).map((data => (
                        <a key={data.quizId} href='#' className='flex flex-row justify-between place-items-center bg-[#FCFCFC] border-b-[1px] border-b-[#CFCFCF] p-4'>
                            <div className='flex flex-col'>
                                <p className='text-[14px] font-[600] text-[#EF7A0C]'>{data.quizType}</p>
                                <p className='text-[16px] font-[700]'>{data.quizName}</p>
                            </div>
                            <div className='flex flex-row'>
                                <Progress type="dashboard" percent={Number(data.percentage)} gapDegree={0} size={40} strokeColor="#EF7A0C" format={(percent) => (<span style={{ fontWeight: 700 }}>{percent}%</span>)}/>
                                <img src="../../assets/right-arrow.svg" alt="" />
                            </div>
                        </a>
                    )))}
                </div>
            </div>
        </section>
    )
}

// quiz-details
{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}