collect-system/apps/web/src/components/models/course/card/CourseHeader.tsx

import { CalendarIcon, UserGroupIcon, AcademicCapIcon } from '@heroicons/react/24/outline';

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>{level}</span>
            </div>
          )}
          {numberOfStudents !== undefined && (
            <div className="flex items-center gap-1">
              <UserGroupIcon className="h-4 w-4" />
              <span>{numberOfStudents} students</span>
            </div>
          )}
          {publishedAt && (
            <div className="flex items-center gap-1">
              <CalendarIcon className="h-4 w-4" />
              <span>{publishedAt.toLocaleDateString()}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};