import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'

const styles = {
  containerCSS: {
    maxWidth: '95%'
  },
  notifFeed: {
    color: '#333333', // Miami-Dade Pantone Black Color Specifications
    overflow: 'scroll',
    height: '360px'
  },
  scrollable: {
    color: 'black'
  }
}

const NotificationHomeV = (props) => {
  return (
    <div>
      <div className={`row`}>
        <div className={`${props.classes.containerCSS}`}>
          <div className={`${props.classes.notifFeed}`}>
            <h4 id='list-item-1'>Item 1</h4>
            <p>User notifications should go in here</p>
            <h4 id='list-item-2'>Item 2</h4>
            <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
            <h4 id='list-item-3'>Item 3</h4>
            <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
            <h4 id='list-item-4'>Item 4</h4>
            <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
          </div>
        </div>
      </div>
      <div className={`row`}>
        <button type='button' className={`btn btn-block btn-secondary`}>Notifications</button>
      </div>
    </div>
  )
}

NotificationHomeV.propTypes = {
  classes: PropTypes.object
}

export default injectSheet(styles)(NotificationHomeV)
