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, lecture, selectedLectureId } =
		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">
				{!selectedLectureId ? course?.title : lecture?.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(
						!selectedLectureId
							? course?.createdAt
							: lecture?.createdAt
					).format("YYYY年M月D日")}
				</div>
				<div className="flex gap-1">
					{"最后更新:"}
					{dayjs(
						!selectedLectureId
							? course?.updatedAt
							: lecture?.updatedAt
					).format("YYYY年M月D日")}
				</div>
				<div className="flex gap-1">
					<EyeOutlined></EyeOutlined>
					<div>{`观看次数${
						!selectedLectureId
							? course?.views || 0
							: lecture?.views || 0
					}`}</div>
				</div>
				<div className="flex gap-1">
					<BookOutlined />
					<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
				</div>
				<CourseOperationBtns />
			</div>
		</div>
	);
}