import React, { PropTypes } from 'react';
import Page from './Page';
import ProjectListItem from './ProjectListItem';
import AspectContainer from './AspectContainer';
import BannerImage from './BannerImage';
import styles from './Projects.css';

const Projects = ({ projects }) => (
  <Page
    Hero={() =>
      <AspectContainer>
        <BannerImage url="https://placebear.com/900/1200" />
      </AspectContainer>
    }
    title="Projects"
  >
    <div className={styles.projects}>
      {projects.map(project => <ProjectListItem key={project.id} {...project} />)}
    </div>
  </Page>
  );

Projects.propTypes = {
  projects: PropTypes.arrayOf(PropTypes.object),
};

export default Projects;
