import CourseCard from '../../../components/CourseCard';
import { useGetAllSnai3iCoursesQuery } from '@/app/backend/endpoints/courses';
import Fallback from '@/components/Fallback';
import { Button } from '@/components/ui/button';
import useTitle from '@/hooks/useTitle';
import { useNavigate } from 'react-router-dom';

function Tutorials() {
  useTitle('Tutorials');
  const navigate = useNavigate();
  const { data: coursesData, isLoading } = useGetAllSnai3iCoursesQuery();

  const courses = coursesData?.data ?? [];
  if (isLoading) return <Fallback />;

  return (
    <div className="flex flex-col gap-8">
      <div className="w-full flex justify-between items-center">
        <div className="text-slate-700 text-[26px] font-semibold">
          Snai3i Courses (Tutorials)
        </div>
        <Button
          size="sm"
          className="flex items-center gap-2 rounded-sm"
          onClick={() => {
            navigate('/dashboard/snai3i-courses/create');
          }}
        >
          <span>Create New Course</span>
        </Button>
      </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
            isAdmin
          />
        ))}
      </div>
    </div>
  );
}

export default Tutorials;