import React from "react";
import Avatar from "@material-ui/core/Avatar";
import {Link} from 'react-router-dom';
import "./index.scss";

export default function Course(props: any) {
  const { data } = props;
  return (
    <Link to={'/'} className="home-courses-course d-flex flex-column" draggable={'false'}>
      <img src={data.imageUrl} alt={data.name} draggable={'false'} />
      <footer className="d-flex">
        <Avatar src={data.user} style={{ width: 40, height: 40 }} />
        <div className="home-courses-course__info d-flex flex-column">
          <h2>{data.name}</h2>
          {window.innerWidth > 1007 ? (
            <p>{data.text.slice(0, 100)}</p>
          ) : (
            <p>{data.text.slice(0, 50)}</p>
          )}

          <ul className="d-flex flex-wrap">
            {data.tags.length <= 2
              ? data.tags.map((item: String, i: any) => <li key={i}>{item}</li>)
              : null}
            {data.tags.length > 2 ? (
              <>
                <li key={1}>{data.tags[0]}</li>
                <li key={2}>{data.tags[1]}</li>
                <li key={3}>+</li>
              </>
            ) : null}
          </ul>
        </div>
      </footer>
    </Link>
  );
}
