import React from 'react'

import { type BasicAccessCheckProps } from '../core/access-check-shared'
import { useAccessCheck } from '../core/use-access-check'

interface AccessGuardProps extends BasicAccessCheckProps {
  /**
   * Content to render when access is denied.
   */
  fallback?: React.ReactNode
  /**
   * Content to render when access is granted.
   */
  children?: React.ReactNode
}

/**
 * Basic access control guard that conditionally renders content based on permissions.
 *
 * Use this for component-level access control where you want to show/hide content
 * or render alternative UI when permission is insufficient.
 *
 * @example
 * // Simple show/hide
 * <AccessGuard id="OrgUsersAction">
 *   <Button onClick={handleAddUser}>Add User</Button>
 * </AccessGuard>
 *
 * @example
 * // With custom fallback
 * <AccessGuard
 *   id="ClusterDelete"
 *   scopeProps={{ tidbId: cluster.id }}
 *   fallback={<Text color="dimmed">Deletion not permitted</Text>}
 * >
 *   <Button color="red" onClick={handleDelete}>
 *     Delete Cluster
 *   </Button>
 * </AccessGuard>
 */
export const AccessGuard = ({ id, scopeProps, fallback, children }: AccessGuardProps) => {
  const accessible = useAccessCheck(id, scopeProps)

  return <>{accessible ? children : fallback}</>
}