import React from 'react'
import classnames from 'classnames'
import { array, string, object, oneOfType } from 'prop-types'

import { Icon } from '@swrve/icons'

import Input from '../input/input'

const SearchInput = ({ icon, placeholder, className, wrapperClassName, ...props }) => {
  const inputStyles = classnames('pl-8', className)
  const wrapperStyles = classnames('sw-search-input relative', wrapperClassName)

  return (
    <div className={wrapperStyles}>
      <Input className={inputStyles} placeholder={placeholder} {...props} />
      <Icon className="absolute left-0 text-secondary-100" name={icon} size="medium" />
    </div>
  )
}

SearchInput.propTypes = {
  /** Additional Searchbox classnames */
  className: oneOfType([string, object, array]),
  /** Icon used within Inputbox default to search */
  icon: string,
  /** Search Input placeholder text */
  placeholder: string,
  /** Additional Wrapper classnames */
  wrapperClassName: oneOfType([string, object, array])
}

SearchInput.defaultProps = {
  icon: 'search',
  placeholder: 'Search'
}

SearchInput.displayName = 'SearchInput'

export default SearchInput