// CourseList.tsx
import { motion } from "framer-motion";
import { Course, CourseDto } from "@nice/common";
import { EmptyState } from "@web/src/components/common/space/Empty";
import { Pagination } from "@web/src/components/common/element/Pagination";
import React from "react";

interface CourseListProps {
	courses?: CourseDto[];
	renderItem: (course: CourseDto) => React.ReactNode;
	emptyComponent?: React.ReactNode;
	// 新增分页相关属性
	currentPage: number;
	totalPages: number;
	onPageChange: (page: number) => void;
}

const container = {
	hidden: { opacity: 0 },
	show: {
		opacity: 1,
		transition: {
			staggerChildren: 0.05,
			duration: 0.3,
		},
	},
};
export const CourseList = ({
	courses,
	renderItem,
	emptyComponent: EmptyComponent,
	currentPage,
	totalPages,
	onPageChange,
}: CourseListProps) => {
	if (!courses || courses.length === 0) {
		return EmptyComponent || <EmptyState />;
	}

	return (
		<div>
			<motion.div
				variants={container}
				initial="hidden"
				animate="show"
				className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
				{courses.map((course) => (
					<motion.div key={course.id}>
						{renderItem(course)}
					</motion.div>
				))}
			</motion.div>

			<Pagination
				currentPage={currentPage}
				totalPages={totalPages}
				onPageChange={onPageChange}
			/>
		</div>
	);
};
