import { useState } from 'react';
import { View, Button, Text, Image } from 'react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const CreateTOTP = () => {
  const stytch = useStytchB2BClient();
  const [totpData, setTotpData] = useState(null);

  const createTOTP = async () => {
    const response = await stytch.totps.create({
      organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
      member_id: 'member-test-32fc5024-9c09-4da3-bd2e-c9698807585d',
      expiration_minutes: 60,
    });
    setTotpData(response);
    console.log('TOTP created:', response);
  };

  return (
    <View>
      <Button title="Create TOTP" onPress={createTOTP} />
      {totpData && (
        <View>
          <Text>Secret: {totpData.secret}</Text>
          <Image source={{ uri: totpData.qr_code }} />
        </View>
      )}
    </View>
  );
};