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

export const SearchMembers = () => {
  const stytch = useStytchB2BClient();
  const [emailQuery, setEmailQuery] = useState('');
  const [members, setMembers] = useState([]);

  const handleSearch = async () => {
    const response = await stytch.organizations.members.search({
      query: {
        operator: 'AND',
        operands: [
          {
            filter_name: 'member_email_fuzzy',
            value: emailQuery
          }
        ]
      }
    });
    setMembers(response.members);
  };

  return (
    <div>
      <input
        value={emailQuery}
        onChange={(e) => setEmailQuery(e.target.value)}
        placeholder="Search by email..."
      />
      <button onClick={handleSearch}>Search</button>
      <div>
        {members.map((member) => (
          <div key={member.member_id}>
            {member.name} - {member.email_address}
          </div>
        ))}
      </div>
    </div>
  );
};

{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "results_metadata": {
    "next_cursor": null,
    "total": 5
  },
  "members": [
    { ... },
  ],
  "organizations": {
    "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931": {
      ...
    }
  }
}