import { useContext } from "react";
import { CourseDetailContext } from "./CourseDetailContext";
import { useNavigate } from "react-router-dom";
import { BookOutlined, CalendarOutlined, EditTwoTone, EyeOutlined, ReloadOutlined } from "@ant-design/icons";
import dayjs from "dayjs";

export default function CourseDetailTitle() {
	const {
		course,
		isLoading,
		canEdit,
		lecture,
		lectureIsLoading,
		selectedLectureId,
	} = useContext(CourseDetailContext);
	const navigate = useNavigate();
	return (
		<div className="flex justify-center flex-col items-center gap-2 w-full my-2  px-6">
			<div className="flex justify-start w-full text-2xl font-bold">
				{course?.title}
			</div>
			<div className="text-gray-600 flex w-full justify-start gap-5">
				<div className="flex gap-1">
					<CalendarOutlined></CalendarOutlined>
					{"创建于:"}
					{dayjs(course?.createdAt).format("YYYY年M月D日")}
				</div>
				<div className="flex gap-1">
					<ReloadOutlined></ReloadOutlined>
					{"更新于:"}
					{dayjs(course?.updatedAt).format("YYYY年M月D日")}
				</div>
				<div className="flex gap-1">
					<EyeOutlined></EyeOutlined>
					<div>{`观看次数${course?.meta?.views || 0}`}</div>
				</div>
				<div className="flex gap-1">
					<BookOutlined />
					<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
				</div>
				{canEdit && (
					<div
						className="flex gap-1 text-primary hover:cursor-pointer"
						onClick={() => {
							const url = course?.id
								? `/course/${course?.id}/editor`
								: "/course/editor";
							navigate(url);
						}}>
						<EditTwoTone></EditTwoTone>
						{"点击编辑课程"}
					</div>
				)}
			</div>
		</div>
	);
}