import { useUserStore } from '@/stores/userStore';

interface SuperAdminGuardProps {
  children: React.ReactNode;
}

export function SuperAdminGuard({ children }: SuperAdminGuardProps) {
  const { user } = useUserStore();
  const allowedRoles = ['super_admin']; // Only super_admin role can access super admin features

  if (!allowedRoles.includes(user?.role?.name || '')) {
    return (
      <div className="max-w-md mx-auto mt-20 text-center">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6">
          <div className="text-red-600 mb-4">
            <svg className="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
          </div>
          <h2 className="text-xl font-bold text-red-900 mb-2">Access Denied</h2>
          <p className="text-red-700">You don't have permission to access the super admin area.</p>
        </div>
      </div>
    );
  }

  return <>{children}</>;
}