staff_data/apps/web/src/app/main/courses/components/CourseCard.tsx

import { Card, Rate, Tag } from 'antd';
import { Course } from '../mockData';
import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { CourseDto } from '@nice/common';

interface CourseCardProps {
  course: CourseDto;
}

export default function CourseCard({ course }: CourseCardProps) {
  return (
    <Card 
      hoverable 
      className="w-full h-full transition-all duration-300 hover:shadow-lg"
      cover={
        <img
          alt={course.title}
          src={course?.meta?.thumbnail}
          className="object-cover w-full h-40"
        />
      }
    >
      <div className="space-y-3">
        <h3 className="text-lg font-semibold line-clamp-2 hover:text-blue-600 transition-colors">
          {course.title}
        </h3>
        <p className="text-gray-500 text-sm">{course.subTitle}</p>
        <div className="flex items-center space-x-2">
          <Rate disabled defaultValue={course.rating} className="text-sm" />
          <span className="text-gray-500 text-sm">{course.rating}</span>
        </div>
        <div className="flex items-center justify-between text-sm text-gray-500">
          <div className="flex items-center space-x-1">
            <UserOutlined className="text-gray-400" />
            <span>{course.enrollments?.length} 人在学</span>
          </div>
          <div className="flex items-center space-x-1">
            <ClockCircleOutlined className="text-gray-400" />
            <span>{course.duration}</span>
          </div>
        </div>
        <div className="flex flex-wrap gap-2 pt-2">
          <Tag color="blue" className="rounded-full px-3">{course.terms[0].name}</Tag>
          <Tag color="green" className="rounded-full px-3">{course.terms[1].name}</Tag>
        </div>
      </div>
    </Card>
  );
}