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

export const DiscoveryAuthenticate = () => {
  const stytch = useStytchB2BClient();
  const [discoveredOrganizations, setDiscoveredOrganizations] = useState([]);

  useEffect(() => {
    const getDiscoveredOrganizations = async () => {
      const { discovered_organizations } = await stytch.discovery.organizations.list();
      setDiscoveredOrganizations(discovered_organizations);
    };
    getDiscoveredOrganizations();
  }, [stytch]);

  return (
    <div>
      <h1>Select an Organization</h1>
      <ul>
        {discoveredOrganizations.map((organization) => (
          <li key={organization.organization_id}>{organization.organization_name}</li>
        ))}
      </ul>
    </div>
  );
};

{
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "status_code": 200,
  "email_address": "nstam@stytch.com",
  "discovered_organizations": [
    {
      "organization": {
        "organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
        "organization_name": "Example Org Inc"
      },
      "membership": { ... },
      "member_authenticated": true,
      "primary_required": { ... },
      "mfa_required": { ... }
    },
    {
      "organization": {
        "organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
        "organization_name": "Example Org Inc"
      },
      "membership": { ... },
      "member_authenticated": false,
      "primary_required": { ... },
      "mfa_required": { ... }
    }
  ],
  "organization_id_hint": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931"
}