import { Header, Icon } from 'semantic-ui-react'
import ItemEx from './ItemEx.coffee'
import Responsive from '../../components/Responsive/Responsive'

import './Menu.less'

export default observer class Menu extends Component
  @propTypes:
    company: PropTypes.string.isRequired
    items: PropTypes.array.isRequired
    onClickClose: PropTypes.func

  @defaultProps:
    onClickClose: =>

  renderItems: =>
    @props.items.map (item, index) =>
      <ItemEx key={index} item={item} />

  render: =>
    <div className="admin-menu">
      <div>
        <h3>{ @props.company }</h3>
        <Responsive only="mobile">
          <Icon name="close" style={{ color: '#ffffff' }} size="big" onClick={@props.onClickClose} />
        </Responsive>
      </div>
      <div>
        { @renderItems() }
      </div>
    </div>