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() };