// components/CourseVideoPage.tsx
import { motion, useScroll, useTransform } from "framer-motion";
import React from "react";
import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
import { CourseDetailContent } from "./CourseDetailContent";
import { Course } from "@nice/common";

interface CourseVideoPageProps {
	course: Course;
	videoSrc?: string;
	videoPoster?: string;
	isLoading?: boolean;
}

export const CourseVideoPage: React.FC<CourseVideoPageProps> = ({
	course,
	videoSrc,
	videoPoster,
	isLoading = false,
}) => {
	// 创建滚动动画效果
	const { scrollY } = useScroll();
	const videoScale = useTransform(scrollY, [0, 200], [1, 0.8]);
	const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);

	return (
		<div className="min-h-screen bg-gray-50">
			{/* 固定的视频区域 */}
			<motion.div
				style={{
					// scale: videoScale,
					opacity: videoOpacity,
				}}
				className="sticky top-0 w-full bg-black z-10">
				<div className="max-w-6xl mx-auto px-4">
					<VideoPlayer src={videoSrc} poster={videoPoster} />
				</div>
			</motion.div>

			{/* 课程内容区域 */}
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.5, delay: 0.2 }}
				className="max-w-6xl mx-auto px-4 py-8">
				<CourseDetailContent course={course} isLoading={isLoading} />
			</motion.div>
		</div>
	);
};
export default CourseVideoPage;