import { ShieldAlert } from 'lucide-react'
import usePermissions from '../hooks/usePermissions'

/**
 * Wraps a route element. Renders a 403 screen if the user lacks the required permission.
 * Usage: <PermissionGuard perm="viewReports"><TodayPage /></PermissionGuard>
 */
export default function PermissionGuard({ perm, children }) {
  const perms = usePermissions()

  if (!perms[perm]) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-4 text-center p-8">
        <ShieldAlert size={48} className="text-red-400" />
        <h2 className="text-xl font-semibold text-gray-800">Δεν έχετε πρόσβαση</h2>
        <p className="text-gray-500 max-w-sm">
          Δεν έχετε τα απαραίτητα δικαιώματα για αυτή τη σελίδα.
          Επικοινωνήστε με τον διαχειριστή εάν νομίζετε ότι πρόκειται για λάθος.
        </p>
      </div>
    )
  }

  return children
}
