/*
 * File: SetupBiometricScreen.tsx
 * Description: Screen for setting up biometric authentication
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button } from 'shared/src/components/Button';
import { Colors, Spacing, Typography } from 'shared/src/theme';
import { useBiometric } from '../hooks/useBiometric';

/**
 * SetupBiometricScreen - allows user to setup biometric authentication
 */
const SetupBiometricScreen: React.FC = () => {
  const { authenticate } = useBiometric();

  const handleSetup = async () => {
    await authenticate();
    // TODO: Handle result and navigate
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Setup Biometric Login</Text>
      <Text style={styles.info}>Enable Face ID or Touch ID for quick and secure login.</Text>
      <Button title="Enable Biometric" onPress={handleSetup} style={styles.button} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background,
    justifyContent: 'center',
    padding: Spacing.lg,
  },
  title: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.title,
    color: Colors.primary,
    marginBottom: Spacing.lg,
    textAlign: 'center',
  },
  info: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    color: Colors.textSecondary,
    marginBottom: Spacing.xl,
    textAlign: 'center',
  },
  button: {
    marginTop: Spacing.md,
  },
});

export default SetupBiometricScreen;

/*
 * End of File: SetupBiometricScreen.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */