import { View, TextInput, StyleSheet } from 'react-native';
import { Colors, Spacing } from '../constants/theme';

type InputFieldProps = {
  placeholder?: string;
  value?: string;
  onChangeText?: (text: string) => void;
  secureTextEntry?: boolean;
};

export default function InputField({
  placeholder,
  value,
  onChangeText,
  secureTextEntry,
}: InputFieldProps) {

  const theme = Colors.light;

  return (
    <View
      style={[
        styles.container,
        { backgroundColor: theme.backgroundElement },
      ]}
    >
      <TextInput
        placeholder={placeholder}
        placeholderTextColor={theme.textSecondary}
        value={value}
        onChangeText={onChangeText}
        secureTextEntry={secureTextEntry}
        style={[styles.input, { color: theme.text }]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: Spacing.three,
    paddingVertical: Spacing.two,
    borderRadius: 12,
    marginVertical: 8,
  },
  input: {
    fontSize: 16,
  },
});