import React from "react";
import PropTypes from "prop-types";
import { List } from "immutable";

export const Genres = ({ genres }) => {
  if (genres.size === 0) {
    return null;
  }

  // Uppercase first genres
  const prettyGenres = genres
    .toJS()
    .map((word) => word[0].toUpperCase() + word.substr(1))
    .join(", ");

  return (
    <span>
      <i className="fa fa-tags mr-1" />
      {prettyGenres}
    </span>
  );
};
Genres.propTypes = { genres: PropTypes.instanceOf(List) };
Genres.defaultProps = { genres: List() };