import React from 'react';
import PropTypes from 'prop-types';

import { getAnnotationStyle } from '../utils';

const AnnotationQuote = ({ annotation, metacategories }) => {
  let selector = false;

  if (annotation.target[0].selector) {
    selector = annotation.target[0].selector.find(s => s.type === 'TextQuoteSelector');
  }

  if (selector) {
    return (
      <div className="exact">
        <p>
          { selector.prefix }
          <span style={getAnnotationStyle(annotation, metacategories)}>{ selector.exact }</span>
          { selector.suffix }
        </p>
      </div>
    );
  }
  return null;
};


AnnotationQuote.propTypes = {
  annotation: PropTypes.object.isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default AnnotationQuote;