import React from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '../../constants/theme';

export const SearchBar = () => {
  return (
    <View style={styles.container}>
      <View style={styles.searchRow}>
        <TouchableOpacity style={styles.selector}>
          <Ionicons name="location-outline" size={18} color={Colors.light.primary} />
          <Text style={styles.selectorText}>Location</Text>
        </TouchableOpacity>
        
        <View style={styles.divider} />
        
        <TouchableOpacity style={styles.selector}>
          <Ionicons name="grid-outline" size={18} color={Colors.light.primary} />
          <Text style={styles.selectorText}>Category</Text>
        </TouchableOpacity>
        
        <View style={styles.divider} />
        
        <TouchableOpacity style={styles.filterBtn}>
          <Ionicons name="options-outline" size={20} color={Colors.light.primary} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderBottomWidth: 1,
    borderBottomColor: Colors.light.border,
  },
  searchRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#eee',
    height: 45,
  },
  selector: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  selectorText: {
    marginLeft: 6,
    fontSize: 13,
    color: '#333',
  },
  divider: {
    width: 1,
    height: '60%',
    backgroundColor: '#eee',
  },
  filterBtn: {
    width: 45,
    alignItems: 'center',
    justifyContent: 'center',
  },
});