import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const DiscoveryAuthenticate = () => {
  const stytch = useStytchB2BClient();
  const [searchParams] = useSearchParams();
  const [organizations, setOrganizations] = useState([]);

  useEffect(() => {
    const token = searchParams.get('token');
    if (token) {
      stytch.magicLinks.discovery.authenticate({
        discovery_magic_links_token: token,
      }).then((response) => {
        setOrganizations(response.discovered_organizations);
      });
    }
  }, [stytch, searchParams]);

  return (
    <div>
      <h2>Select an Organization</h2>
      {organizations.map((org) => (
        <div key={org.organization.organization_id}>
          {org.organization.organization_name}
        </div>
      ))}
    </div>
  );
};