import React from 'react';
import { Link } from 'react-router-dom';

/**
 * CourseCard component displays a course item in the course list
 * 
 * @param {Object} props - Component props
 * @param {Object} props.course - Course data
 * @returns {JSX.Element} CourseCard component
 */
const CourseCard = ({ course }) => {
  return (
    <Link to={`/courses/${course.id}`} className="flex bg-white rounded-lg overflow-hidden shadow-sm">
      <div className="w-1/3 h-28">
        <img 
          src={course.imageUrl} 
          alt={course.title}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="flex-1 p-3 flex flex-col justify-between">
        <div>
          <h3 className="font-medium text-sm mb-1 line-clamp-2">{course.title}</h3>
          <div className="text-gray-500 text-xs">{course.subtitle}</div>
        </div>
        <div className="flex justify-between items-end mt-1">
          <div className="text-orange-500 font-semibold">¥{course.price}</div>
          <div className="text-gray-400 text-xs">
            {course.subscribers}人订阅
          </div>
        </div>
        <div className="text-gray-400 text-xs">
          已更新{course.updatedLessons}期 | {course.subscribers}人订阅
        </div>
      </div>
    </Link>
  );
};

export default CourseCard;