import {
	CalendarIcon,
	UserGroupIcon,
	AcademicCapIcon,
} from "@heroicons/react/24/outline";
import { CourseLevelLabel } from "@nice/common";

interface CourseHeaderProps {
	title: string;
	subTitle?: string;
	thumbnail?: string;
	level?: string;
	numberOfStudents?: number;
	publishedAt?: Date;
}

export const CourseHeader = ({
	title,
	subTitle,
	thumbnail,
	level,
	numberOfStudents,
	publishedAt,
}: CourseHeaderProps) => {
	return (
		<div className="relative">
			{thumbnail && (
				<div className="relative h-48 w-full">
					<img src={thumbnail} alt={title} className="object-cover" />
				</div>
			)}
			<div className="p-6">
				<h3 className="text-xl font-bold text-gray-900 ">{title}</h3>
				{subTitle && <p className="mt-2 text-gray-600 ">{subTitle}</p>}
				<div className="mt-4 flex items-center gap-4 text-sm text-gray-500 ">
					{level && (
						<div className="flex items-center gap-1">
							<AcademicCapIcon className="h-4 w-4" />
							<span>{CourseLevelLabel[level]}</span>
						</div>
					)}
					{numberOfStudents !== undefined && (
						<div className="flex items-center gap-1">
							<UserGroupIcon className="h-4 w-4" />
							<span>{numberOfStudents} 人学习中</span>
						</div>
					)}
					{publishedAt && (
						<div className="flex items-center gap-1">
							<CalendarIcon className="h-4 w-4" />
							<span>{publishedAt.toLocaleDateString()}</span>
						</div>
					)}
				</div>
			</div>
		</div>
	);
};