import { Course } from "@nice/common";
import React, { useContext } from "react";
import { Image, Typography, Skeleton } from "antd"; // 引入 antd 组件
import { CourseDetailContext } from "./CourseDetailContext";
import { CalendarOutlined, EyeOutlined } from "@ant-design/icons";
import dayjs from "dayjs";

export const CourseDetailDescription: React.FC = () => {
	const { course, isLoading, selectedLectureId } =
		useContext(CourseDetailContext);
	const { Paragraph, Title } = Typography;

	return (
		<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6">
			{isLoading || !course ? (
				<Skeleton active paragraph={{ rows: 4 }} />
			) : (
				<div className="space-y-4">
					{!selectedLectureId && (
						<>
							<div className="relative w-[600px] h-[340px] m-4 overflow-hidden flex justify-center items-center">
								<Image
									src={course?.meta?.thumbnail}
									preview={false}
									className="w-full h-full object-cover z-0"
								/>
							</div>
						</>
					)}
					<div className="text-lg font-bold">{"课程简介:"}</div>
					<div className="text-gray-600 flex justify-start gap-4">
						<div>{course?.subTitle}</div>
						<div className="flex gap-1">
							<EyeOutlined></EyeOutlined>
							<div>{course?.meta?.views}</div>
						</div>
						<div className="flex gap-1">
							<CalendarOutlined></CalendarOutlined>
							{dayjs(course?.createdAt).format("YYYY年M月D日")}
						</div>
					</div>
					<Paragraph
						className="text-gray-600"
						ellipsis={{
							rows: 3,
							expandable: true,
							symbol: "展开",
							onExpand: () => console.log("展开"),
							// collapseText: "收起",
						}}>
						{course?.content}
					</Paragraph>
				</div>
			)}
		</div>
	);
};