// components/CourseSyllabus/LectureItem.tsx

import { Lecture } from "@nice/common";
import React from "react";
import { motion } from "framer-motion";
import { ClockIcon, PlayCircleIcon } from "@heroicons/react/24/outline";

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

export const LectureItem: React.FC<LectureItemProps> = ({
	lecture,
	onClick,
}) => (
	<motion.button
		initial={{ opacity: 0, x: -20 }}
		animate={{ opacity: 1, x: 0 }}
		className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors"
		onClick={() => onClick(lecture.id)}>
		<PlayCircleIcon 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.description && (
				<p className="text-sm text-gray-500 mt-1">
					{lecture.description}
				</p>
			)}
		</div>
		<div className="flex items-center gap-1 text-sm text-gray-500">
			<ClockIcon className="w-4 h-4" />
			<span>{lecture.duration}分钟</span>
		</div>
	</motion.button>
);