import React from 'react'
import classnames from 'classnames'
import PropTypes from 'prop-types'

import plateSingleSrc from '../img/labware/plate_single.png'
import troughSingleSrc from '../img/labware/trough_single.png'
import tiprackSingleSrc from '../img/labware/tiprack_single.png'

export default function Diagram (props) {
  const {isTiprack, type} = props
  const style = classnames('flex', 'flex__items_center', 'flex__justify_center')
  let labwareSrc
  if (isTiprack) {
    labwareSrc = tiprackSingleSrc
  } else if (type.includes('trough')) {
    labwareSrc = troughSingleSrc
  } else {
    labwareSrc = plateSingleSrc
  }

  return (
    <div className={style}>
      <img src={labwareSrc} />
    </div>
  )
}

Diagram.propTypes = {
  isTiprack: PropTypes.bool.isRequired,
  type: PropTypes.string.isRequired
}

@@ -281,16 +281,117 @@
 e.png'%0A%0A
+Diagram.propTypes = %7B%0A  isTiprack: PropTypes.bool.isRequired,%0A  type: PropTypes.string.isRequired%0A%7D%0A%0A
 export d
@@ -821,105 +821,4 @@
 )%0A%7D%0A
-%0ADiagram.propTypes = %7B%0A  isTiprack: PropTypes.bool.isRequired,%0A  type: PropTypes.string.isRequired%0A%7D%0A

put propTypes directly above component