import { Dialog } from '#/components/molecules/dialog.jsx';
import { ScopeSummary } from '#/components/molecules/scope-summary.jsx';
import { TextLink } from '#/components/molecules/text-link.jsx';
import { scopeTokens } from '#/lib/format.js';
import { scopeDisplay } from '#/lib/scope-display.js';

/** A compact "N permissions" affordance that opens the full scope cards. */
export function ScopeList({ scope }) {
  const tokens = scopeTokens(scope);
  return (
    <Dialog
      title="Permissions"
      trigger={
        <TextLink className="text-[12.5px]">
          {tokens.length} permission{tokens.length === 1 ? '' : 's'}
        </TextLink>
      }
    >
      <ScopeSummary perms={scopeDisplay(scope)} className="mt-0" />
    </Dialog>
  );
}