import { motion } from "framer-motion";
import { useContext, useState } from "react";
import { CourseDetailContext } from "./CourseDetailContext";

import CourseDetailDisplayArea from "./CourseDetailDisplayArea";
import { CourseSyllabus } from "./CourseSyllabus/CourseSyllabus";
import { CourseDetailHeader } from "./CourseDetailHeader/CourseDetailHeader";

export default function CourseDetailLayout() {
	const {
		course,
		selectedLectureId,
		lecture,
		isLoading,
		setSelectedLectureId,
	} = useContext(CourseDetailContext);

	const handleLectureClick = (lectureId: string) => {
		setSelectedLectureId(lectureId);
	};
	const [isSyllabusOpen, setIsSyllabusOpen] = useState(true);
	return (
		<div className="relative">
			<CourseDetailHeader />

			{/* 添加 Header 组件 */}
			{/* 主内容区域 */}
			{/* 为了防止 Header 覆盖内容，添加上边距 */}
			<div className="pt-16">
				{" "}
				{/* 添加这个包装 div */}
				<motion.div
					initial={{
						width: "75%",
					}}
					animate={{
						width: isSyllabusOpen ? "75%" : "100%",
					}}
					transition={{ type: "spring", stiffness: 300, damping: 30 }}
					className="relative">
					<CourseDetailDisplayArea
					// course={course}
					// isLoading={isLoading}
					/>
				</motion.div>
				{/* 课程大纲侧边栏 */}
				<CourseSyllabus
					sections={course?.sections || []}
					onLectureClick={handleLectureClick}
					isOpen={isSyllabusOpen}
					onToggle={() => setIsSyllabusOpen(!isSyllabusOpen)}
				/>
			</div>
		</div>
	);
}