import React from 'react';
import './ProtocolSummary.css'


export default ({ annotationCategories }) => (
  <div className="protocol-summary">
  {annotationCategories.map((category) => (
    <div className="protocol-summary-category" key={category.key} >
      <span className="protocol-summary-category-name badge text-light" style={{ backgroundColor: category.color, fontSize: "1em" }} >{category.name}</span>
      <p className="text-primary">{category.description}</p>
    </div>
  ))}
  </div>
);