sam-react-prod/src/components/common/PermissionGuard.tsx

'use client';

import { usePermission } from '@/hooks/usePermission';
import type { PermissionAction, UsePermissionReturn } from '@/lib/permissions/types';

interface PermissionGuardProps {
  action: PermissionAction;
  /** 다른 메뉴 권한 체크 시 URL 직접 지정 (생략하면 현재 URL 자동 매칭) */
  url?: string;
  /** 권한 없을 때 대체 UI (기본: 렌더링 안 함) */
  fallback?: React.ReactNode;
  children: React.ReactNode;
}

/**
 * 버튼/영역 레벨 권한 제어 컴포넌트
 *
 * @example
 * // 현재 페이지 기준 (URL 자동매칭)
 * <PermissionGuard action="delete">
 *   <Button variant="destructive">삭제</Button>
 * </PermissionGuard>
 *
 * // 다른 메뉴 권한 체크
 * <PermissionGuard action="approve" url="/approval/inbox">
 *   <Button>승인</Button>
 * </PermissionGuard>
 */
export function PermissionGuard({
  action,
  url,
  fallback = null,
  children,
}: PermissionGuardProps) {
  const permission = usePermission(url);

  const key = `can${action.charAt(0).toUpperCase()}${action.slice(1)}` as keyof UsePermissionReturn;
  if (!permission[key]) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}