import React, { PropTypes } from 'react'
import BarButtonItem from '../BarButtonItem'
import Input from '../Input'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  to: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
  ]),
}

const defaultProps = {
  className: '',
  to: '/',
}

const SearchBar = ({ className, to, ...other }) =>
  <div {...other} className={`${styles.searchBar} ${className}`}>
    <Input className={styles.input} type="search" placeholder="Search" />
    <BarButtonItem to={to}>取消</BarButtonItem>
  </div>

SearchBar.propTypes = propTypes
SearchBar.defaultProps = defaultProps

export default SearchBar