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

function MyCourses() {
  useTitle('My Courses');
  const { user } = useUser();
  const { teacher_id } = user as TeacherI;
  const { data: coursesData, isLoading } =
    useGetCoursesByTeacherQuery(teacher_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} />
        ))}
      </div>
    </div>
  );
}

export default MyCourses;