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

export const GetConnectedApp = ({ connectedAppId }) => {
  const stytch = useStytchB2BClient();
  const [connectedApp, setConnectedApp] = useState(null);

  const getConnectedApp = async () => {
    const response = await stytch.organization.getConnectedApp({
      connected_app_id: connectedAppId
    });
    setConnectedApp(response);
  };

  return (
    <div>
      <button onClick={getConnectedApp}>Get Connected App</button>
      {connectedApp && (
        <div>
          <p>Name: {connectedApp.name}</p>
          <p>Type: {connectedApp.client_type}</p>
          <p>Description: {connectedApp.description}</p>
        </div>
      )}
    </div>
  );
};

{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "client_type": "third_party_public",
  "connected_app_id": "...",
  "name": "Third Party Public",
  "description": "Third Party Public App",
  "logo_url": null,
  "active_members": [
    {
      "member_id": "member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
      "granted_scopes": [
        "openid",
        "profile",
        "email"
      ]
    }
  ]
}