import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { responsiveFontSize, responsiveWidth } from 'react-native-responsive-dimensions';
import Icon from 'react-native-vector-icons/Ionicons';
import { colors } from '../theme/colors';

interface SearchbarProps {
  onChangeText: (text: string) => void;
  text: string;
  placeholder?: string;
}

const Searchbar = (props: SearchbarProps) => {
  const { onChangeText, text, placeholder } = props;

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        textContentType="organizationName"
        placeholder={placeholder}
        placeholderTextColor={colors.greyMedium}
        onChangeText={onChangeText}
        value={text}
      />
      {text ? (
        <TouchableOpacity onPress={() => onChangeText('')}>
          <Icon name={'close'} size={26} color={colors.greyLight} />
        </TouchableOpacity>
      ) : (
        <Icon name={'search'} size={26} color={colors.greyLight} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: colors.greyVeryLight,
    borderRadius: 6,
    flexDirection: 'row',
    alignItems: 'center',
    margin: 3,
    alignSelf: 'center',
    width: '100%',
  },

  input: {
    height: responsiveFontSize(5),
    fontSize: responsiveFontSize(2),
    marginLeft: responsiveWidth(2),
    width: '88%',
    fontFamily: 'Lato-Regular',
  },
});
export default Searchbar;