import React, { FC } from 'react';
import { TextInput, Text } from 'react-native';

import { COLOR_SECONDARY } from '../../constants/custom';

type props = {
  value?: string;
  setValue?: (text: string) => void;
  title?: string;
  disabled?: boolean;
  multiline?: boolean;
  placeholder?: string;
  number?: boolean;
  email?: boolean;
};

const TextField: FC<props> = ({
  title,
  value,
  setValue,
  disabled,
  multiline,
  placeholder,
  number,
  email,
}) => {
  return (
    <>
      <Text className="font-bold">{title}</Text>
      <TextInput
        className="w-full rounded border-1 border-divider bg-secondary-bg py-[3px] px-4 text-black"
        value={value}
        onChangeText={setValue}
        editable={!disabled}
        placeholder={placeholder}
        selectionColor={COLOR_SECONDARY}
        multiline={multiline}
        keyboardType={number ? 'numeric' : email ? 'email-address' : 'default'}
      />
    </>
  );
};

export default TextField;
