import { useContext } from "react";
import { CourseDetailContext } from "../../CourseDetailContext";
import { CheckCircleIcon } from "@heroicons/react/24/solid";

export function Overview() {
	const { course } = useContext(CourseDetailContext);
	return (
		<>
			<div className="space-y-8">
				{/* 课程描述 */}
				<div className="prose max-w-none">
					<p>{course?.description}</p>
				</div>

				{/* 学习目标 */}
				<div>
					<h2 className="text-xl font-semibold mb-4">学习目标</h2>
					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
						{course?.objectives.map((objective, index) => (
							<div key={index} className="flex items-start gap-2">
								<CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0 mt-1" />
								<span>{objective}</span>
							</div>
						))}
					</div>
				</div>

				{/* 适合人群 */}
				<div>
					<h2 className="text-xl font-semibold mb-4">适合人群</h2>
					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
						{course?.audiences.map((audience, index) => (
							<div key={index} className="flex items-start gap-2">
								<CheckCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
								<span>{audience}</span>
							</div>
						))}
					</div>
				</div>

				{/* 课程要求 */}
				<div>
					<h2 className="text-xl font-semibold mb-4">课程要求</h2>
					<ul className="list-disc list-inside space-y-2 text-gray-700">
						{course?.requirements.map((requirement, index) => (
							<li key={index}>{requirement}</li>
						))}
					</ul>
				</div>

				{/* 可获得技能 */}
				<div>
					<h2 className="text-xl font-semibold mb-4">可获得技能</h2>
					<div className="flex flex-wrap gap-2">
						{course?.skills.map((skill, index) => (
							<span
								key={index}
								className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
								{skill}
							</span>
						))}
					</div>
				</div>
			</div>
		</>
	);
}
