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

export const SessionDisplay = () => {
  const stytch = useStytchB2BClient();
  const [session, setSession] = useState(null);

  useEffect(() => {
    // Subscribe to session changes
    const unsubscribe = stytch.session.onChange((session) => {
      setSession(session);
    });

    // Cleanup subscription on unmount
    return unsubscribe;
  }, [stytch]);

  return (
    <View>
      {session ? (
        <Text>Session ID: {session.member_session_id}</Text>
      ) : (
        <Text>No active session</Text>
      )}
    </View>
  );
};