'use client';

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

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

export function RequireRole({ 
  role, 
  fallback = null, 
  children, 
  requireAll = false,
  loading = <Center><Loader size="sm" /></Center>
}: RequireRoleProps) {
  const { hasRole, loading: isLoading } = useRole(role);

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

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

  return <>{children}</>;
}