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 } = useContext(CourseDetailContext);
	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">
				{course?.author?.showname && (
					<div>
						发布者:
						{course?.author?.showname}
					</div>
				)}
				{course?.depts && course?.depts?.length > 0 && (
					<div>
						发布单位:
						{course?.depts?.map((dept) => dept.name)}
					</div>
				)}
			</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">
					{"最后更新:"}
					{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>
	);
}