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

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


    useEffect(() => {
        fetch('http://localhost:5174/api/continue-learning')
          .then(res => {
            if (!res.ok) {
              throw new Error('Network response was not ok');
            }
            return res.json();
          })
          .then(data => {
            console.log(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='bg-[#FCFCFC]'>
            <div className='container mx-auto'>
                <h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="/assets/right-arrow.svg" alt="" /></h2>
                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
                    {courseData.map(data=>(
                        <div key={data.id} className=''>
                            <img className='w-full rounded-[10px]' src={data.img} alt="" />
                            <h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
                            <p className='text-[14px] font-[500] text-[#6E6E6E]'>
                                <span>Chapter {data.chapter}</span> &#8226; &nbsp;
                                <span>{data.Program}</span>
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}