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.post.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>
	);
}