import React from 'react';
import { StyleSheet, ViewProps, DimensionValue } from 'react-native';
import ThemedView from '@/components/theme/default/ThemedView';
import ThemedTextInput from '@/components/theme/inputs/ThemedTextInput';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

type ThemedSearchBarProps = ViewProps & {
  placeholder?: string;
  value: string;
  onChangeText: (text: string) => void;
  width?: DimensionValue;
  height?: number;
};

const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
  placeholder = 'Search',
  value,
  onChangeText,
  width = '100%',
  height = 40,
  style,
  ...restProps
}) => {
  const scheme = useColorScheme() ?? 'dark';

  return (
    <ThemedView style={[styles.container, { width }, style]} {...restProps}>
      <Ionicons name='search' size={20} color={Colors[scheme].text} style={styles.icon} />
      <ThemedTextInput
        placeholder={placeholder}
        value={value}
        onChangeText={onChangeText}
        height={height}
        width={width}
        style={styles.input}
      />
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    position: 'absolute',
    zIndex: 1,
    left: 15,
  },
  input: {
    paddingLeft: 45,
  },
});

export default ThemedSearchBar;
