import React, { useState, useEffect } from 'react';
import CoursesCatalogItem from './CoursesCatalogItem';

// 课程目录
const CoursesCatalog = ({ courseItems }) => {
  const [sortedCourses, setSortedCourses] = useState([]);

  useEffect(() => {
    // 过滤出已审核的课程 即 State == 2
    let filtedCourseItems = courseItems.filter((item) => item.Status === 2);
    // 按照 CreateTime 进行降序排序
    filtedCourseItems.sort((a, b) => {
      return new Date(b.CreateTime) - new Date(a.CreateTime);
    });
    const sortedData = filtedCourseItems.map((item, index) => {
      item = { ...item, index: index };
      return item;
    });

    setSortedCourses(sortedData);
  }, [courseItems]);

  return (
    <div className=''>
      <div className='px-5 flex items-center justify-between font-bold text-gray-500 text-sm py-2 border-b border-gray-300'>
        <div className='w-20'>序号</div>
        <div className='w-1/2'>课程名称</div>
        <div className='w-1/4 hidden md:block'>播放量</div>
        <div className='w-1/4 hidden md:block'>创建时间</div>
        <div className='w-1/4'>操作</div>
      </div>
      {sortedCourses.map((course) => (
        <CoursesCatalogItem key={course.Code} course={course} />
      ))}
    </div>
  );
};

export default CoursesCatalog;
