import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'
import { Link } from 'react-router-dom'

/* IMPORT COMPONENTS */

const styles = {
  border: {
    padding: 0
  },
  links: {
    textDecoration: 'none'
  }
}

const MenuV = (props) => {
  return (
    <div className='container-fluid'>
      <div className='row'>
        <div className={`col-sm ${props.classes.border}`}>
          <Link to='/createItem'><button type='button' className={`btn btn-light btn-block ${props.classes.links}`}>Create New</button></Link>
        </div>
        <div className={`col-sm ${props.classes.border}`}>
          <button type='button' className='btn btn-light btn-block'>Recent</button>
        </div>
        <div className={`col-sm ${props.classes.border}`}>
          <button type='button' className='btn btn-light btn-block'>Priority</button>
        </div>
        <div className={`col-sm ${props.classes.border}`}>
          <button type='button' className='btn btn-light btn-block'>Relevent</button>
        </div>
        <div className={`col-sm ${props.classes.border}`}>
          <button type='button' className='btn btn-light btn-block'>Other</button>
        </div>
      </div>
    </div>
  )
}

MenuV.propTypes = {
  classes: PropTypes.object
}

export default injectSheet(styles)(MenuV)
