import { useState } from 'react';
import { Button, Keyboard, Text, TextInput, View } from 'react-native';

type Props = {
  onContinue: (values: { phone: string; notes: string }) => void;
};

export function ContactFields({ onContinue }: Props) {
  const [phone, setPhone] = useState('');
  const [notes, setNotes] = useState('');
  const continueForm = () => {
    Keyboard.dismiss();
    onContinue({ phone, notes });
  };

  return (
    <View style={{ gap: 12 }}>
      <Text>Phone</Text>
      <TextInput
        accessibilityLabel="Phone"
        keyboardType="phone-pad"
        value={phone}
        onChangeText={setPhone}
        onSubmitEditing={continueForm}
        style={{ borderWidth: 1, padding: 12 }}
      />
      <Text>Notes</Text>
      <TextInput
        accessibilityLabel="Notes"
        multiline
        value={notes}
        onChangeText={setNotes}
        underlineColorAndroid="transparent"
        style={{
          minHeight: 120, borderWidth: 1,
          padding: 12, textAlignVertical: 'top',
        }}
      />
      <Button title="Continue" onPress={continueForm} />
    </View>
  );
}