'use client';

import { ReactNode } from 'react';
import { usePermission } from '../../hooks/usePermission';
import { Loader, Center } from '@mantine/core';

interface RequirePermissionProps {
  permission: string | string[];
  fallback?: ReactNode;
  children: ReactNode;
  requireAll?: boolean;
  loading?: ReactNode;
}

export function RequirePermission({ 
  permission, 
  fallback = null, 
  children, 
  requireAll = true,
  loading = <Center><Loader size="sm" /></Center>
}: RequirePermissionProps) {
  const { hasPermission, hasAnyPermission, loading: isLoading } = usePermission(permission);

  if (isLoading) {
    return <>{loading}</>;
  }

  const isAuthorized = requireAll ? hasPermission : hasAnyPermission;

  if (!isAuthorized) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}