import { Feather } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
import { colors, radius, spacing } from '../../../theme';

type ActionSearchBarProps = {
  value: string;
  onChange: (value: string) => void;
};

const ActionSearchBar = ({ value, onChange }: ActionSearchBarProps) => {
  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Recherche"
        value={value}
        onChangeText={onChange}
        style={styles.input}
        placeholderTextColor={colors.textMuted}
      />
      <Feather name="search" size={18} color={colors.textSecondary} />
    </View>
  );
};

export default ActionSearchBar;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: colors.white,
    borderRadius: radius.md,
    paddingHorizontal: spacing.md,
    height: 46,
    marginBottom: spacing.md,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: colors.gray200,
  },
  input: {
    flex: 1,
    color: colors.textPrimary,
  },
});