import React from 'react'
import { SearchInputProps } from './typings'
import { TitlePlaceholder, InputBoxPlaceholder, Wrapper } from './styled'

function defaultRenderSearchInputBox(props: SearchInputProps) {
  const { hasTitle = false } = props
  return (
    <React.Fragment>
      {hasTitle && <TitlePlaceholder width={250} />}
      <InputBoxPlaceholder height={44} />
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: SearchInputProps) {
  const { children, className } = props
  return <Wrapper className={className}>{children}</Wrapper>
}

export { defaultRenderSearchInputBox, defaultRenderWrapper }