import React from 'react';
import { StyleSheet, TextInput, TextInputProps } from 'react-native';
import { useThemeColor } from '../../lib/hooks/use-theme-color';

export function InputField({ style, ...otherProps }: TextInputProps) {
  const bgColor = useThemeColor("card")
  const textColor = useThemeColor("text")
  
  return (
    <TextInput
      style={[
        styles.default,
        {
          backgroundColor: bgColor,
          color: textColor
        },
        style,
      ]}
      placeholderTextColor={textColor + '99'}
      {...otherProps}
    />
  );
}

const styles = StyleSheet.create({
  default: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 6,
    fontSize: 16,
    borderWidth: 1,
    borderColor: 'transparent',
  },
});