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";
import CourseOperationBtns from "./JoinLearingButton";

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 items-center gap-5">
				<div className="flex gap-1">
					<CalendarOutlined></CalendarOutlined>
					{"创建于:"}
					{dayjs(course?.createdAt).format("YYYY年M月D日")}
				</div>
				<div className="flex gap-1">
					<ReloadOutlined spin></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>
				<CourseOperationBtns />
			</div>
		</div>
	);
}