import { Input, View } from '@tarojs/components'
import Icon from '@/components/ui/Icon'
import './index.scss'

interface SearchBarProps {
  placeholder: string
  value?: string
  onInput?: (value: string) => void
  onConfirm?: () => void
}

export function SearchBar({ placeholder, value = '', onInput, onConfirm }: SearchBarProps) {
  return (
    <View className='search-bar'>
      <Icon name='search' size={14} />
      <Input
        className='search-bar__input'
        value={value}
        placeholder={placeholder}
        placeholderClass='search-bar__placeholder'
        confirmType='search'
        onInput={event => onInput?.(String(event.detail.value))}
        onConfirm={onConfirm}
      />
    </View>
  )
}

export default SearchBar