'use strict'

import React from 'react'
import {ApHeader, ApHeaderStyle} from 'apeman-react-header'

const ExampleComponent = React.createClass({
  render () {
    const s = this
    let { state } = s
    return (
      <div>
        <ApHeaderStyle/>
        <ApHeader>
          <ApHeaderLogo>MyLogo</ApHeaderLogo>
          <ApHeaderTab>
            <ApHeaderTabItem href='#Foo' onTap={ () => { s.selectTab('FOO') } }
                             selected={ state.tab === 'FOO'}>FOO</ApHeaderTabItem>
            <ApHeaderTabItem href='#Bar' onTap={ () => { s.selectTab('BAR') } }
                             selected={ state.tab === 'BAR'}>BAR</ApHeaderTabItem>
            <ApHeaderTabItem href='#Baz' onTap={ () => { s.selectTab('BAZ') } }
                             selected={ state.tab === 'BAZ'}>BAZ</ApHeaderTabItem>
          </ApHeaderTab>
        </ApHeader>
      </div>
    )
  },
  selectTab (tab) {
    const s = this
    s.setState({ tab: tab })
  }
})