import {
	SkeletonItem,
	SkeletonSection,
} from "@web/src/components/presentation/Skeleton";

export const CourseDetailSkeleton = () => {
	return (
		<div className="space-y-8">
			{/* 标题骨架屏 */}
			<div className="space-y-4">
				<SkeletonItem className="h-9 w-3/4" />
				<SkeletonItem className="h-6 w-1/2" delay={0.2} />
			</div>

			{/* 描述骨架屏 */}
			<SkeletonSection items={2} />

			{/* 学习目标骨架屏 */}
			<SkeletonSection title items={4} gridCols />

			{/* 适合人群骨架屏 */}
			<SkeletonSection title items={4} gridCols />

			{/* 技能骨架屏 */}
			<div>
				<SkeletonItem className="h-6 w-32 mb-4" />
				<div className="flex flex-wrap gap-2">
					{Array.from({ length: 5 }).map((_, i) => (
						<SkeletonItem
							key={i}
							className="h-8 w-20 rounded-full"
							delay={i * 0.2}
						/>
					))}
				</div>
			</div>
		</div>
	);
};
export default CourseDetailSkeleton;