ternary operators css

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { Icon } from "@ematix/tesseract-component-library";
import classnames from "classnames";
import cls from "./moduleSelectorItem.scss";

const ModuleSelectorItem = ({
  module: {
    icon, name, to, baseColor, enabled, className,
  },
}) => (
  <Link
    to={to}
    className={classnames(cls.boardItem, {
      enabled,
    })}
    style={{
      cursor: enabled ? "pointer" : "not-allowed",
      pointerEvents: enabled ? "auto" : "none",
    }}
  >
    <div
      className={classnames(cls.iconWrapper, cls[className])}
      style={{
        color: enabled ? baseColor : "#CCC",
      }}
    >
      <Icon className={cls.iconStyle}>{icon}</Icon>
    </div>
    <span style={{ color: enabled ? "inherit" : "#CCC" }}>{name}</span>
  </Link>
);

ModuleSelectorItem.propTypes = {
  module: PropTypes.shape({
    icon: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    to: PropTypes.string.isRequired,
    baseColor: PropTypes.string.isRequired,
  }).isRequired,
};

export default ModuleSelectorItem;