import { usePermissions } from '@/hooks/usePermissions';
import { Permission } from '@/types/permissions';
import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';

export interface PermissionGateProps {
  children: React.ReactNode;
  permission: Permission | Permission[];
  requireAll?: boolean;
  fallback?: React.ReactNode;
  showError?: boolean;
}

/**
 * Component that conditionally renders children based on permissions
 * Use this for hiding/showing UI elements based on permissions
 */
export const PermissionGate = ({
  children,
  permission,
  requireAll = false,
  fallback = null,
  showError = false,
}: PermissionGateProps) => {
  const { t } = useTranslation();
  const { checkAnyPermission, checkAllPermissions } = usePermissions();

  const permissions = Array.isArray(permission) ? permission : [permission];
  const hasAccess = requireAll ? checkAllPermissions(permissions) : checkAnyPermission(permissions);

  if (!hasAccess) {
    if (showError) {
      return <div className="text-sm text-destructive">{t('permissionGate.noPermission')}</div>;
    }
    return <>{fallback}</>;
  }

  return <>{children}</>;
};