MAD-Treasure-Hunt/app/components/UI/SearchBar.jsx

import React from 'react';
import {StyleSheet, TextInput, View} from 'react-native';

const SearchBar = ({ placeholder = 'Search...', value, onChangeText, style = {} }) => {
  return (
    <View style={[styles.container, style]}>
      <TextInput
        style={styles.input}
        placeholder={placeholder}
        value={value}
        onChangeText={onChangeText}
        placeholderTextColor="#9ca3af"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 12,
  },
  input: {
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
    color: '#111827',
  },
});

export default SearchBar;