import React, { useState } from 'react';
import { View, TextInput, Text, TouchableOpacity } from 'react-native';
import { savePin } from '../auth/AppPinService';

const SetPinScreen = ({ onDone }: any) => {
    const [pin, setPin] = useState('');

    const save = async () => {
        await savePin(pin);
        onDone();
    };

    return (
        <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
            <Text>Create App PIN</Text>
            <TextInput
                secureTextEntry
                keyboardType="number-pad"
                maxLength={4}
                value={pin}
                onChangeText={setPin}
                style={{ borderWidth: 1, padding: 12, marginVertical: 10 }}
            />
            <TouchableOpacity onPress={save}>
                <Text style={{ color: 'blue' }}>Save PIN</Text>
            </TouchableOpacity>
        </View>
    );
};

export default SetPinScreen;