import useUser from '@/hooks/useUser';
import CourseCard from '../../../components/CourseCard';
import {
  useGetCoursesBySchoolQuery,
} from '@/app/backend/endpoints/courses';
import Fallback from '@/components/Fallback';
import useTitle from '@/hooks/useTitle';

function MyCourses() {
  useTitle('My Courses');
  const { user } = useUser();
  const { school_id } = user as SchoolI;
  const { data: coursesData, isLoading } =
    useGetCoursesBySchoolQuery(school_id);
  const courses = coursesData?.data ?? [];
  
  if (isLoading) return <Fallback />;

  return (
    <div className="flex flex-col gap-8">
      <div className="w-full justify-start items-center">
        <div className="text-slate-700 text-[26px] font-semibold">
          My Courses
        </div>
      </div>
      <div className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 grid w-fit gap-8 2xl:gap-6">
        {courses.map((course) => (
          <CourseCard
            key={course.course_id}
            course={course}
            navi={false}
            schoolId={school_id}
            nbTeachers={course.nb_teachers_accounts}
          />
        ))}
      </div>
    </div>
  );
}

export default MyCourses;