'use client';

import { ReactNode } from 'react';
import { useRole } from '../../hooks/useRole';
import { usePermission } from '../../hooks/usePermission';

interface ProtectProps {
  children: ReactNode;
  fallback?: ReactNode;
  role?: string | string[];
  permission?: string | string[];
  condition?: 'and' | 'or';
}

export function Protect({ 
  children, 
  fallback = null, 
  role, 
  permission,
  condition = 'and' 
}: ProtectProps) {
  const { hasRole } = useRole(role || []);
  const { hasPermission, hasAnyPermission } = usePermission(permission || []);

  let isAuthorized = true;

  if (role && permission) {
    if (condition === 'and') {
      isAuthorized = hasRole && hasPermission;
    } else {
      isAuthorized = hasRole || hasAnyPermission;
    }
  } else if (role) {
    isAuthorized = hasRole;
  } else if (permission) {
    isAuthorized = hasPermission;
  }

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

  return <>{children}</>;
}