import React from "react";
import ScheduleIcon from "@mui/icons-material/Schedule";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";

import "./style.scss";

const Card = ({ image, tags, title, description, time, date }) => {
  return (
    <div className="card">
      <div className="card__info">
        <div className="info__image">
          <img src={image} alt={image} />
        </div>
        <div className="info__tags">
          {tags.map((tag) => {
            return (
              <div key={tag} className="tag">
                {tag}
              </div>
            );
          })}
        </div>
        <h2 className="info__title">{title}</h2>
        <p className="info__description">{description}</p>
        <div className="info__full-date">
          <div className="full-date__time">
            <ScheduleIcon fontSize="small" />
            {time}
          </div>
          <div className="full-date__date">
            <CalendarTodayIcon fontSize="small" />
            {date}
          </div>
        </div>
      </div>
      <button className="card__button-enroll">Записаться</button>
    </div>
  );
};

export default Card;