import React, { PropTypes } from 'react';
import enhanceCollection from 'phenomic/lib/enhance-collection';

import PagesList from '../../components/PagesList';

import styles from './index.css';

const defaultNumberOfPosts = 6;

const LatestPosts = (props, { collection }) => {
    const latestPosts = enhanceCollection(collection, {
        filter: { layout: 'Post' },
        sort: 'date',
        reverse: true
    })
  .slice(0, props.numberOfPosts || defaultNumberOfPosts);

    return (
    <div className={'col-xs-12 ' + styles.latestPostsContainer}>
      <h2 className={ styles.latestPosts }>
        { 'Latest Posts' }
      </h2>
      <PagesList pages={ latestPosts } />
    </div>
    );
};

LatestPosts.propTypes = {
    numberOfPosts: PropTypes.number
};

LatestPosts.contextTypes = {
    collection: PropTypes.array.isRequired
};

export default LatestPosts;
