collect-system/apps/web/src/components/models/course/detail/course-detail.tsx

import { CheckCircleIcon } from '@heroicons/react/24/outline'
import { Course } from "@nice/common"
interface CourseDetailProps {
    course: Course
}

export const CourseDetail: React.FC<CourseDetailProps> = ({ course }) => {
    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>
    )
}