import React, { useEffect, useState } from 'react';
interface Performer {
    id: number;
    name: string;
    avatar: string;
    program: string;
    type: string;
}

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


    useEffect(() => {
        fetch('http://localhost:5174/api/class-mates')
          .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 (
        <div className=''>
            <p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
                <span>Your Classmates </span>&nbsp; | &nbsp;<span>Graduate Program</span>
            </p>
            <div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
                {classmatesData.map(data => (
                    <div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
                        <div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
                        <div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
                        <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={data.avatar} alt="" />
                        <p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
                        <p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
                            <span>{data.program}</span> | <span>{data.type}</span>
                        </p>
                    </div>
                ))}
            </div>
        </div>
    );
}