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

export const PermissionsDisplay = () => {
  const stytch = useStytchB2BClient();
  const [permissions, setPermissions] = useState({});

  useEffect(() => {
    stytch.rbac.allPermissions().then((perms) => setPermissions(perms));
  }, [stytch]);

  return (
    <div>
      <h2>Your Permissions</h2>
      {Object.entries(permissions).map(([resource, actions]) => (
        <div key={resource}>
          <h3>{resource}</h3>
          <ul>
            {Object.entries(actions).map(([action, allowed]) => (
              <li key={action}>
                {action}: {allowed ? '✓' : '✗'}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};