import React from 'react';

import PropTypes from 'prop-types';

import { FormattedMessage } from 'react-intl';

import DefinitionBlock from './DefinitionBlock';

const DefinitionsCards = ({ annotations, metacategories, children }) => {

  const defBlocks = annotations.map(

    annotation => <DefinitionBlock key={`annotation-${annotation.id}`} annotation={annotation} metacategories={metacategories} />,

  );

  let noDefinitionContent = <FormattedMessage id="ui.definitionCards.noDefinition" defaultMessage="No definition yet" />;

  if (React.Children.count(children) > 0) {

    noDefinitionContent = children;

  }

  return (

    <div className="card-columns">

      { annotations.length === 0 ? noDefinitionContent : defBlocks }

    </div>

  );

};

DefinitionsCards.propTypes = {

  annotations: PropTypes.arrayOf(PropTypes.object),

  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,

  children: PropTypes.node,

};

DefinitionsCards.defaultProps = {

  annotations: [],

  children: null,

};

export default DefinitionsCards;