/**
 * SearchBar — single-TextInput pill. Icon + input в одном ряду, без
 * idle/focused двойного состояния (раньше был хак с невидимым
 * TextInput поверх отцентрированного Text — ломал focus и выравнивание
 * на Android).
 */
import React from 'react';
import { View, TextInput, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export interface SearchBarProps {
  value: string;
  onChangeText: (v: string) => void;
  placeholder?: string;
  autoFocus?: boolean;
  onSubmitEditing?: () => void;
  onClear?: () => void;
}

export function SearchBar({
  value, onChangeText, placeholder = 'Search', autoFocus, onSubmitEditing, onClear,
}: SearchBarProps) {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#111111',
        borderWidth: 1,
        borderColor: '#1f1f1f',
        borderRadius: 999,
        paddingHorizontal: 14,
        gap: 8,
      }}
    >
      <Ionicons name="search" size={16} color="#6a6a6a" />
      <TextInput
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor="#5a5a5a"
        autoCapitalize="none"
        autoCorrect={false}
        autoFocus={autoFocus}
        onSubmitEditing={onSubmitEditing}
        returnKeyType="search"
        style={{
          flex: 1,
          color: '#ffffff',
          fontSize: 14,
          paddingVertical: 10,
          padding: 0,
          includeFontPadding: false,
        }}
      />
      {value.length > 0 && (
        <Pressable
          onPress={() => {
            onChangeText('');
            onClear?.();
          }}
          hitSlop={8}
        >
          <Ionicons name="close-circle" size={16} color="#6a6a6a" />
        </Pressable>
      )}
    </View>
  );
}