// Permission Gate Component
import { ReactNode } from 'react';
import { useAuthStore } from '@/stores/authStore';

interface PermissionGateProps {
  permission: string;
  children: ReactNode;
  fallback?: ReactNode;
  showDisabled?: boolean;
}

export default function PermissionGate({
  permission,
  children,
  fallback = null,
  showDisabled = false,
}: PermissionGateProps) {
  const { checkPermission } = useAuthStore();
  const hasPermission = checkPermission(permission);

  if (hasPermission) {
    return <>{children}</>;
  }

  if (showDisabled) {
    return (
      <div style={{ opacity: 0.5, pointerEvents: 'none' }} title={`Requires permission: ${permission}`}>
        {children}
      </div>
    );
  }

  return <>{fallback}</>;
}

