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

// components/CourseSyllabus/LectureItem.tsx

import { Lecture, LectureType } from "@nice/common";
import React from "react";
import {
	ClockCircleOutlined,
	FileTextOutlined,
	PlayCircleOutlined,
} from "@ant-design/icons"; // 使用 Ant Design 图标

interface LectureItemProps {
	lecture: Lecture;
	onClick: (lectureId: string) => void;
}

export const LectureItem: React.FC<LectureItemProps> = ({
	lecture,
	onClick,
}) => (
	<div
		className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer"
		onClick={() => onClick(lecture.id)}>
		{lecture.type === LectureType.VIDEO && (
			<PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />
		)}
		{lecture.type === LectureType.ARTICLE && (
			<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
		)}
		<div className="flex-grow">
			<h4 className="font-medium text-gray-800">{lecture.title}</h4>
			{lecture.subTitle && (
				<p className="text-sm text-gray-500 mt-1">{lecture.subTitle}</p>
			)}
		</div>
		{/* <div className="flex items-center gap-1 text-sm text-gray-500">
			<ClockCircleOutlined className="w-4 h-4" />
			<span>{lecture.duration}分钟</span>
		</div> */}
	</div>
);