text: import React from 'react';
  import { Link } from 'react-router-dom';
  
  import getVideoDurationString from '../../../utils/getVideoDurationString';
  import getVideosCountString from '../../../utils/getVideosCountString';
  import DisplayRate from '../../UI/DisplayRate/DisplayRate';
  
  const FeaturedMasterclassItem = ({ masterclass }) => {
    const {
      _id,
      title,
      coverUrl,
      description,
      teacher,
      videos,
      rate,
      rates,
      level,
      studentsCount,
      createdAt,
    } = masterclass;
  
    const displayDuration = getVideoDurationString(videos);
    const displayVideoCount = getVideosCountString(videos);
  
    return (
      <div className="carousel-item active">
        <div className="row h-100 w-100">
          <div className="col-12 col-md-5">
            <a href="/">
              <img
                className="img-fluid"
                src={`https://storage.googleapis.com/${coverUrl}`}
                alt={title}
              />
            </a>
          </div>
          <div className="col-12 col-md-7 ">
            <div className="mb-1">
              <Link to={`/masterclass-details/${_id}`}>
                <h3 className="text-dark font-weight-bold">{title}</h3>
              </Link>
              <p>{description}</p>
              <p className="text-secondary">
                от{' '}
                <Link to={`/teacher-profile/${teacher._id}`}>
                  {teacher.user.name}
                </Link>
              </p>
              <div className="d-flex flex-wrap text-lead">
                <p className=" py-1 pr-3"> {createdAt.split('T')[0]}</p>
                <p className="p-1 pr-3">{displayDuration}</p>
                <p className="p-1 pr-3">{displayVideoCount}</p>
                <p className="border border-dark rounded p-1">
                  Ниво: <strong>{level}</strong>
                </p>
              </div>
              <div className="d-flex align-items-baseline">
                <DisplayRate rateValue={rate} rateCount={rates.length} />
                <p className="ml-2">({`${studentsCount} ученици`})</p>
              </div>
              <h3 className="text-dark font-weight-bold">125лв.</h3>
            </div>
            <a className="btn btn-outline-info btn" href="/" role="button">
              Към курса
            </a>
          </div>
        </div>
      </div>
    );
  };
  
  export default FeaturedMasterclassItem;
  