import React from 'react';
import { Pressable, StyleSheet, TextInput, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../../theme';

interface SearchBarProps {
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  /** 提交（回车/搜索键）回调，用于记录搜索历史 */
  onSubmit?: () => void;
}

export function SearchBar({ value, onChangeText, placeholder, onSubmit }: SearchBarProps) {
  const { theme } = useTheme();
  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.colors.bgTertiary,
          borderRadius: theme.radii.xl, // Bento 大圆角 xl (24px)
          borderWidth: StyleSheet.hairlineWidth,
          borderColor: theme.colors.border,
        },
      ]}
    >
      <Ionicons name="search" size={18} color={theme.colors.fgSecondary} style={styles.icon} />
      <TextInput
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        returnKeyType="search"
        onSubmitEditing={onSubmit}
        placeholderTextColor={theme.colors.fgSecondary}
        style={[styles.input, { color: theme.colors.fgPrimary, fontSize: theme.typography.body.fontSize }]}
      />
      {value ? (
        <Pressable onPress={() => onChangeText('')} hitSlop={{ top: 12, bottom: 12, left: 8, right: 8 }} accessibilityRole="button" accessibilityLabel="清除搜索">
          <Ionicons name="close-circle" size={18} color={theme.colors.fgSecondary} />
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 8, marginHorizontal: 16, marginBottom: 8 },
  icon: { marginRight: 8 },
  input: { flex: 1, padding: 0 },
});
