import React from 'react';
import PropTypes from 'prop-types';
import './style.css';

const Item = ({ storybook, owner, source }) => (
  <div className="ft-sbooks col-xs-6 col-md-4" key={storybook.link}>
    <div className="col-md-4">
      <a href={storybook.link} target="_blank" rel="noopener noreferrer">
        <center>
          <img className="ft-logo" src={owner} alt="" />
        </center>
      </a>
    </div>
    <div className="desc col-md-8">
      <p>
        <a href={storybook.link} className="reponame">
          {storybook.name}
        </a>
      </p>
      <a href={source} target="_blank" rel="noopener noreferrer">
        source
      </a>
    </div>
  </div>
);
Item.propTypes = {
  storybook: PropTypes.object.isRequired, // eslint-disable-line
  owner: PropTypes.string.isRequired,
  source: PropTypes.string.isRequired,
};

const Featured = ({ featuredStorybooks }) => (
  <div id="featured" className="row">
    <div className="col-xs-12">
      <h2>Featured Storybooks</h2>
      <div className="row">{featuredStorybooks.map(item => <Item {...item} />)}</div>
      <hr />
    </div>
  </div>
);

Featured.propTypes = {
  featuredStorybooks: PropTypes.array, // eslint-disable-line
};

export default Featured;