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


function Tutorials() {
    useTitle('Tutorials');
  const { data: coursesData, isLoading } =
  useGetActiveSnai3iCoursesQuery();
  
    
  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">
          Tutorials 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} isSnai3iCourse/>
        ))}
      </div>
    </div>
  );
}

export default Tutorials;