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

type props = {
  value?: string;
  title?: string;
  onPress: () => void;
  icon?: React.ReactNode;
};

const TextFieldClickable: FC<props> = ({ title, value, icon, onPress }) => {
  return (
    <>
      <Text className="font-bold">{title}</Text>
      <TouchableOpacity className="flex-row justify-end" onPress={onPress}>
        <View className="w-full rounded border-1 border-divider bg-secondary-bg py-2 px-4 text-black">
          <Text>{value}</Text>
        </View>
        {icon && <Text className="absolute pt-2 pr-2 text-lg text-secondary">{icon}</Text>}
      </TouchableOpacity>
    </>
  );
};

export default TextFieldClickable;
