import { CheckCircleIcon } from "@heroicons/react/24/outline";
import { Course } from "@nice/common";
import { motion } from "framer-motion";
import React from "react";
import CourseDetailSkeleton from "./CourseDetailSkeleton";
interface CourseDetailProps {
	course: Course;
	isLoading: boolean;
}

export const CourseDetailContent: React.FC<CourseDetailProps> = ({
	course,
	isLoading,
}) => {
	if (isLoading || !course) {
		return <CourseDetailSkeleton />;
	}
	return (
		<div className="space-y-8">
			{/* 课程标题区域 */}
			<div className="space-y-4">
				<h1 className="text-3xl font-bold">{course.title}</h1>
				{course.subTitle && (
					<p className="text-xl text-gray-600">{course.subTitle}</p>
				)}
			</div>

			{/* 课程描述 */}
			<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>
	);
};