import { CourseList } from "@web/src/components/models/course/list/course-list";
import { api } from "@nice/client";
import { useState } from "react";
import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
import { useAuth } from "@web/src/providers/auth-provider";

export default function StudentCoursesPage() {
    const [currentPage, setCurrentPage] = useState(1);
    const { user } = useAuth()

    const { data: paginationRes, refetch } = api.course.findManyWithPagination.useQuery({
        page: currentPage,
        pageSize: 8,
        where: {
            enrollments: {
                some: {
                    studentId: user?.id
                }
            }
        }
    });

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
        refetch()
    };

    return (
        <div className="bg-slate-50 px-4 py-8 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
                <div className="mb-8">
                    <h1 className="text-3xl font-semibold text-slate-800 mb-4">我参加的课程</h1>
                </div>
                <CourseList
                    totalPages={paginationRes?.totalPages}
                    onPageChange={handlePageChange}
                    currentPage={currentPage}
                    courses={paginationRes?.items as any}
                    renderItem={(course) => <CourseCard course={course}></CourseCard>}>
                </CourseList>
            </div>
        </div>
    );
}