import { useThemeColor } from '@/hooks/useThemeColor';
import React from 'react';
import { StyleSheet, Text, TextInput, TextInputProps, View } from 'react-native';

interface LabeledInputProps extends TextInputProps {
    label: string;
}

export function LabeledInput({ label, style, ...inputProps }: LabeledInputProps) {
    const colors = useThemeColor();

    return (
        <View style={styles.inputGroup}>
            <Text style={[styles.label, { color: colors.textMuted }]}>{label}</Text>
            <TextInput
                style={[
                    styles.textInput,
                    { backgroundColor: colors.inputBg, borderColor: colors.inputBorder, color: colors.text },
                    style,
                ]}
                placeholderTextColor={colors.textMuted}
                {...inputProps}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    inputGroup: {
        marginBottom: 16,
    },
    label: {
        fontSize: 14,
        fontWeight: '500',
        marginBottom: 8,
    },
    textInput: {
        borderWidth: 1,
        borderRadius: 12,
        paddingHorizontal: 16,
        paddingVertical: 12,
        fontSize: 16,
    },
});