import { useState, useEffect } from 'react';
import { useSessionStorage } from 'react-use';
import CourseCoverImage from './CourseCoverImage';
import { useNavigate } from 'react-router-dom';
import * as coursesAPI from '../../apis/coursesAPI';
import { Tooltip } from 'antd';
import FPlatformEnum from '../../utils/enum';
import { useTranslation } from 'react-i18next';

const WechatCourseCard = ({ course, subsetTab, getCourses }) => {
  const navigate = useNavigate();
  const [platform] = useSessionStorage('platform', FPlatformEnum.web.index);
  const { t, i18n } = useTranslation();

  // 进入视频播放器 Demo
  function routeToVideoPlayer() {
    // let mockFileUrl2 = btoa(course);
    console.log(course);
    window.open('./#/wechat_video_detail/' + course.Code);
    // navigate('/wechat_video_detail/' + course.Code);
  }

  return (
    <div className='flex flex-col rounded shadow-lg p-2 bg-white'>
      <div className='cursor-pointer group relative pb-[56.25%] rounded overflow-hidden'>
        <div onClick={routeToVideoPlayer}>
          <CourseCoverImage coverImageUrl={course.Cover} />
        </div>
      </div>
      <div
        className='group cursor-pointer flex flex-grow items-start justify-between'
        onClick={routeToVideoPlayer}>
        <h3 className='mt-1 text-sm group-hover:text-blue-500'>
          {course.Name}
        </h3>
      </div>
    </div>
  );
};

export default WechatCourseCard;
