// components/CourseSyllabus/LectureItem.tsx

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

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

export const LectureItem: React.FC<LectureItemProps> = ({
	lecture,
	onClick,
}) => {
	const { lectureId } = useParams();
	const isReading = useMemo(() => {
		return lecture?.id === lectureId;
	}, [lectureId, lecture]);
	return (
		<div
			className={`w-full flex items-center gap-4 p-4 text-left transition-colors cursor-pointer 
			${
				isReading
					? "bg-blue-50 border-l-4 border-blue-500 hover:bg-blue-50"
					: "hover:bg-gray-200"
			}`}
			onClick={() => onClick(lecture.id)}>
			{lecture?.meta?.type === LectureType.VIDEO && (
				<div className="text-blue-500 flex items-center">
					<PlayCircleOutlined className="w-5 h-5  flex-shrink-0" />
					<span>{LessonTypeLabel[lecture?.meta?.type]}</span>
				</div>
			)}
			{lecture?.meta?.type === LectureType.ARTICLE && (
				<div className="text-blue-500 flex items-center">
					<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />{" "}
					<span>{LessonTypeLabel[lecture?.meta?.type]}</span>
				</div>
			)}
			<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>
	);
};