managarten/maerchenzauber/apps/mobile/components/atoms/TextField.tsx

import React from 'react';
import { TextInput, StyleSheet, View, TextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';

export interface TextFieldProps extends Omit<TextInputProps, 'style'> {
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  multiline?: boolean;
  numberOfLines?: number;
  style?: StyleProp<TextStyle>;
  placeholderTextColor?: string;
  variant?: 'default' | 'large';
}

const TextField: React.FC<TextFieldProps> = ({
  value,
  onChangeText,
  placeholder,
  multiline = false,
  style,
  placeholderTextColor = "#999",
  variant = 'default',
  ...rest
}) => {
  const variantStyles = variant === 'large' ? styles.large : {};
  const multilineVariantStyles = variant === 'large' && multiline ? styles.multilineLarge : multiline ? styles.multiline : {};

  return (
    <View style={styles.container}>
      <TextInput
        style={[styles.input, variantStyles, multilineVariantStyles, style]}
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor={placeholderTextColor}
        multiline={multiline}
        {...rest}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginBottom: 16,
  },
  input: {
    backgroundColor: '#333',
    color: '#fff',
    padding: 12,
    borderRadius: 8,
    fontSize: 16,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.12)',
    width: '100%',
  },
  multiline: {
    height: 100,
    textAlignVertical: 'top',
    paddingTop: 12,
  },
  large: {
    padding: 16,
    borderRadius: 12,
    fontSize: 18,
  },
  multilineLarge: {
    height: 140,
    textAlignVertical: 'top',
    paddingTop: 16,
  },
});

export default TextField;