import React from 'react';
import { StyleSheet, TextInput, TextInputProps, DimensionValue } from 'react-native';
import { ThemedView } from '@/components/theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

const DEFAULT_WIDTH = 320;
const DEFAULT_HEIGHT = 50;

type ThemedTextInputProps = TextInputProps & {
  width?: DimensionValue;
  height?: DimensionValue
  containerStyle?: object;
};

const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
  width = DEFAULT_WIDTH,
  height = DEFAULT_HEIGHT,
  containerStyle,
  style,
  ...restProps
}) => {
  const scheme = useColorScheme() ?? 'dark';
  
  return (
    <ThemedView
      style={[
        styles.inputContainer,
        { width, height },
        containerStyle,
      ]}
    >
      <TextInput
        style={[
          styles.input,
          { 
            color: Colors[scheme].text,
            backgroundColor: Colors[scheme].background,
          },
          style,
        ]}
        placeholderTextColor={Colors[scheme].text + '80'} // 50% opacity
        {...restProps}
      />
    </ThemedView>
  );
};

export default ThemedTextInput;

const styles = StyleSheet.create({
  inputContainer: {
    padding: 3,
    borderRadius: 10,
  },
  input: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
    paddingHorizontal: 15,
    fontSize: 16,
  },
});
