import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { StyleSheet, TextInput, View } from "react-native";

type ConversationSearchBarProps = {
  value: string;
  onChangeText: (value: string) => void;
};

export function ConversationSearchBar({
  value,
  onChangeText,
}: ConversationSearchBarProps) {
  return (
    <View style={styles.wrapper}>
      <MaterialIcons color="#A2A2A7" name="search" size={28} />
      <TextInput
        onChangeText={onChangeText}
        placeholder="搜索联系人备注/昵称/ID"
        placeholderTextColor="#B8B8BC"
        style={styles.input}
        value={value}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    alignItems: "center",
    backgroundColor: "#F0F0F2",
    borderCurve: "continuous",
    borderRadius: 20,
    flexDirection: "row",
    gap: 8,
    height: 52,
    marginHorizontal: 20,
    paddingHorizontal: 16,
  },
  input: {
    color: "#2A2A2A",
    flex: 1,
    fontSize: 16,
    fontWeight: "400",
  },
});