/*
 * File: TextInput.tsx
 * Description: Themed text input component using Clinical Blue Interface design system
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { TextInput as RNTextInput, StyleSheet, TextInputProps, View, ViewStyle } from 'react-native';
import { Colors, Spacing, BorderRadius, Typography } from '../../theme';

// Props for the themed TextInput
interface ThemedTextInputProps extends TextInputProps {
  containerStyle?: ViewStyle;
}

/**
 * Themed TextInput component
 * - Uses Clinical Blue Interface theme
 * - Supports custom container styles
 */
const TextInput: React.FC<ThemedTextInputProps> = ({ containerStyle, style, ...props }) => {
  return (
    <View style={[styles.container, containerStyle]}>
      <RNTextInput
        style={[styles.input, style]}
        placeholderTextColor={Colors.textMuted}
        {...props}
      />
    </View>
  );
};

// Styles use the theme for consistency
const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.backgroundAlt,
    borderRadius: BorderRadius.md,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    marginVertical: Spacing.xs,
  },
  input: {
    color: Colors.textPrimary,
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    padding: 0,
  },
});

export default TextInput;

/*
 * End of File: TextInput.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */ 