{"size": 1570, "ext": "js", "max_stars_repo_path": "src/components/ServiceCard/index.js", "max_stars_repo_name": "danilmaikovsky/events4friends.ru-react", "max_stars_repo_stars_event_min_datetime": "2019-07-24T08:52:52.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-02T16:32:07.000Z", "max_issues_repo_path": "src/components/ServiceCard/index.js", "max_issues_repo_name": "danilmaikovsky/events4friends.ru-react", "max_issues_repo_issues_event_min_datetime": "2018-12-05T12:05:25.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-15T22:29:16.000Z", "max_forks_repo_path": "src/components/ServiceCard/index.js", "max_forks_repo_name": "danilmaikovsky/events4friends.ru-react", "max_forks_repo_forks_event_min_datetime": "2019-03-15T12:04:29.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-03T21:22:43.000Z"}
{"max_stars_count": 11, "max_issues_count": 273, "max_forks_count": 36, "avg_line_length": 24.1538461538, "max_line_length": 79, "alphanum_fraction": 0.4955414013}
import React from 'react';
import 'react-add-to-calendar/dist/react-add-to-calendar.css';
import { Link } from 'react-router-dom';
import './ServiceCard.css';

const ServiceCard = ({ service, highlightName }) => {
  const { isFree, price, name, service: typeOfService, id } = service;

  const ServiceContent = () => {
    let priceTag = null;

    if (isFree) {
      priceTag = <span className="serviceFree">бесплатно</span>;
    } else if (price) {
      priceTag = <span>от {price} руб.</span>;
    }

    if (highlightName) {
      return (
        <div>
          {name}
          <br />
          <small>
            {typeOfService}
            <span>&nbsp;</span>
            {priceTag}
          </small>
        </div>
      );
    }
    return (
      <div>
        {typeOfService}
        <span>&nbsp;</span>
        {priceTag}
        <br />
        <small>{name}</small>
      </div>
    );
  };

  return (
    <Link className="reset-link-style" to={`/service/${id}`}>
      <div className="border-top">
        <div className="container">
          <div className="event-item container-center">
            <div className="d-flex align-items-center justify-content-between">
              <ServiceContent />
              <div className="button">
                <img
                  src="/icons/icon_arrow_forward.svg"
                  alt="➡️"
                  className="service-button__image"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default ServiceCard;
