Kliko/lib/components/ThemedInput.tsx

import React from 'react';
import { TextInput, StyleSheet, TextInputProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
import { ThemedView } from '@/lib/components/ThemedView';
import { ThemedText } from '@/lib/components/ThemedText';
import { Colors } from '@/lib/constants/Colors';
import { useColorScheme } from '@/lib/hooks/useColorScheme';

interface InputComponentProps extends TextInputProps {
    label?: string;
    style?: StyleProp<ViewStyle>;
    inputStyle?: StyleProp<TextStyle>;
}

const ThemedInput: React.FC<InputComponentProps> = ({
    label,
    placeholder,
    value,
    onChangeText,
    secureTextEntry = false,
    keyboardType = 'default',
    style,
    inputStyle,
    ...props
}) => {
    const colorScheme = useColorScheme() ?? 'light';

    return (
        <ThemedView style={[ styles.container, style ]}>
            {label && <ThemedText style={styles.label}>{label}</ThemedText>}
            <TextInput
                style={[ styles.input, inputStyle, {
                    color: Colors[ colorScheme ].text,
                    borderColor: Colors[ colorScheme ].text
                } ]}
                placeholderTextColor={Colors[ colorScheme ].text}
                placeholder={placeholder}
                value={value}
                onChangeText={onChangeText}
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                {...props}
            />
        </ThemedView>
    );
};

const styles = StyleSheet.create( {
    container: {
        width: '100%',
    },
    label: {
        marginBottom: 4,
    },
    input: {
        width: '100%',
        borderWidth: 1,
        padding: 10,
        paddingLeft: 20,
        borderRadius: 3,
        marginBottom: 10,
    },
} );

export default ThemedInput;