import React, { type ReactNode } from 'react'
import { useAuth } from '../hooks/useAuth'
import type { UserRole } from '../types'

interface RequireRoleProps {
  children: ReactNode
  role: UserRole
  fallback?: ReactNode
}

export function RequireRole({ children, role, fallback }: RequireRoleProps) {
  const { hasRole } = useAuth()

  if (!hasRole(role)) {
    return fallback || (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
          <p className="text-gray-600">You need {role} role to access this content.</p>
        </div>
      </div>
    )
  }

  return <>{children}</>
}

export function RequireAdmin({ children, fallback }: { children: ReactNode; fallback?: ReactNode }) {
  return <RequireRole role="admin" fallback={fallback}>{children}</RequireRole>
}

export function RequireSuperAdmin({ children, fallback }: { children: ReactNode; fallback?: ReactNode }) {
  return <RequireRole role="super_admin" fallback={fallback}>{children}</RequireRole>
}

export function RequireTerritoryManager({ children, fallback }: { children: ReactNode; fallback?: ReactNode }) {
  return <RequireRole role="territory_manager" fallback={fallback}>{children}</RequireRole>
}