import React from 'react';
import CourseCard from './CourseCard';
import { RightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

// 课程列表
const PopularCourses = ({
  coursesData,
  subsetTab,
  getCourses,
  routerToMore,
}) => {
  const navigate = useNavigate();

  return (
    <div className='group/albums'>
      <div className='flex flex-row justify-between'>
        <div className='flex flex-col my-2'>
          <div className='text-2xl font-bold text-gray-800'>热门课程</div>
          <hr className='border-gray-700 border-b-2 mb-1 duration-100 group-hover/albums:w-full w-0' />
        </div>
        <button
          className='flex justify-center items-center text-lg text-blue-600 hover:text-blue-700'
          onClick={() => navigate('/all_courses')}>
          <span>查看更多</span>
          <RightOutlined />
        </button>
      </div>
      <div className='w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4'>
        {coursesData.map((course) => (
          <CourseCard
            key={course.Code}
            course={course}
            subsetTab={subsetTab}
            getCourses={getCourses}
          />
        ))}
      </div>
    </div>
  );
};

export default PopularCourses;
