import { StyleSheet, TextInput, View } from 'react-native';
import { colors, radii, spacing } from '../../constants/theme';
import { Icon } from './Icon';

type Props = {
  value: string;
  onChangeText: (t: string) => void;
  onSubmit: () => void;
  placeholder?: string;
};

export function SearchBar({ value, onChangeText, onSubmit, placeholder = 'Search...' }: Props) {
  return (
    <View style={styles.wrap}>
      <Icon name="search" color={colors.textMuted} />
      <TextInput
        style={styles.input}
        value={value}
        onChangeText={onChangeText}
        onSubmitEditing={onSubmit}
        returnKeyType="search"
        placeholder={placeholder}
        placeholderTextColor={colors.textMuted}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: radii.md,
    paddingHorizontal: spacing.md,
    marginBottom: spacing.md,
  },
  input: { flex: 1, paddingVertical: 12, fontSize: 16, color: colors.text },
});