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

/**
 * LiveStreamCard component displays a live stream in the courses page
 * 
 * @param {Object} props - Component props
 * @param {Object} props.stream - Stream data
 * @returns {JSX.Element} LiveStreamCard component
 */
const LiveStreamCard = ({ stream }) => {
  return (
    <div className="relative">
      {/* Live indicator */}
      <div className="absolute top-2 left-2 bg-red-500/90 text-white text-xs px-2 py-1 rounded flex items-center z-10">
        <div className="w-2 h-2 bg-white rounded-full mr-1 animate-pulse"></div>
        直播中
      </div>
      
      <Link to={`/courses/${stream.id}`} className="block rounded-lg overflow-hidden shadow-sm relative">
        <img 
          src={stream.imageUrl} 
          alt={stream.title} 
          className="w-full h-28 object-cover"
        />
        
        {/* Gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"></div>
        
        {/* Stream info */}
        <div className="absolute bottom-2 left-2 right-2">
          <h3 className="text-white text-sm font-medium">「{stream.title}」{stream.subtitle}</h3>
          <div className="flex items-center mt-1">
            <div className="flex -space-x-2">
              <div className="w-5 h-5 rounded-full bg-gray-300 border border-white"></div>
              <div className="w-5 h-5 rounded-full bg-gray-400 border border-white"></div>
              <div className="w-5 h-5 rounded-full bg-gray-500 border border-white"></div>
            </div>
            <span className="text-white text-xs ml-1">{stream.viewers}人在看</span>
            <button className="ml-auto bg-green-500 text-white text-xs px-2 py-1 rounded">
              立即观看
            </button>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default LiveStreamCard;