import { ShieldAlert } from "lucide-react";

import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

type AccessDeniedViewProps = {
  /** The feature name as the reader knows it, e.g. "Asset Analytics Report". */
  label: string;
};

/**
 * Full-page "you don't have access" state for a portal page the reader reached directly
 * (nav item, bookmark, or a permission revoked mid-session) rather than something that
 * failed to load. Deliberately not a bare inline banner: a reader landing here needs a clear
 * "this isn't yours" moment, not a stray line of red text above an otherwise broken/empty
 * page shell.
 */
export function AccessDeniedView({ label }: AccessDeniedViewProps) {
  return (
    <div className="flex min-h-[60vh] items-center justify-center px-4 py-10">
      <Card className="w-full max-w-md border-dashed text-center">
        <CardHeader className="items-center">
          <div className="mb-2 flex size-11 items-center justify-center rounded-full border border-destructive/30 bg-destructive/10 text-destructive">
            <ShieldAlert className="size-5" />
          </div>
          <CardTitle className="text-base">You don&apos;t have access to {label}</CardTitle>
          <CardDescription>
            Your account isn&apos;t permitted to view this page. Ask your administrator to grant access if you
            believe this is a mistake.
          </CardDescription>
        </CardHeader>
      </Card>
    </div>
  );
}