import type { ReactNode } from 'react';
import { useAuthStore } from '@/store/auth';

interface PermissionProps {
  /** 不传表示不做权限限制 */
  permission?: string;
  fallback?: ReactNode;
  children: ReactNode;
}

/** 包裹任意 UI 的权限组件，适合控制菜单项、卡片、表格列等非按钮元素。 */
export default function Permission({
  permission,
  fallback = null,
  children,
}: PermissionProps) {
  const hasPermission = useAuthStore((state) => state.hasPermission);

  if (permission && !hasPermission(permission)) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}