1"use client";
2
3import * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5
6import { Lock, Shield, AlertTriangle } from "lucide-react";
7import { Button } from "@/components/ui/button";
8
9const cn = (...classes: (string | undefined)[]) =>
10  classes.filter(Boolean).join(" ");
11
12const alertVariants = cva("relative rounded-lg border", {
13  variants: {
14    variant: {
15      default: "border-border bg-background",
16      warning: "border-amber-500/50 text-amber-600",
17      error: "border-red-500/50 text-red-600",
18      success: "border-emerald-500/50",
19      info: "border-blue-500/50 text-blue-600",
20    },
21    size: {
22      sm: "px-4 py-3",
23      lg: "p-4",
24    },
25    isNotification: {
26      true: "z-[100] max-w-[400px] bg-background shadow-lg shadow-black/5",
27      false: "",
28    },
29  },
30  defaultVariants: {
31    variant: "default",
32    size: "sm",
33    isNotification: false,
34  },
35});
36
37interface AlertProps
38  extends React.HTMLAttributes<HTMLDivElement>,
39    VariantProps<typeof alertVariants> {
40  icon?: React.ReactNode;
41  action?: React.ReactNode;
42  layout?: "row" | "complex";
43}
44
45const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
46  (
47    {
48      className,
49      variant,
50      size,
51      isNotification,
52      icon,
53      action,
54      layout = "row",
55      children,
56      ...props
57    },
58    ref
59  ) => (
60    <div
61      ref={ref}
62      role="alert"
63      className={cn(
64        alertVariants({ variant, size, isNotification }),
65        className
66      )}
67      {...props}
68    >
69      {layout === "row" ? (
70        <div className="flex items-center gap-2">
71          <div className="grow flex items-center">
72            {icon && <span className="me-3 inline-flex">{icon}</span>}
73            {children}
74          </div>
75          {action && <div className="flex items-center shrink-0">{action}</div>}
76        </div>
77      ) : (
78        <div className="flex gap-2">
79          {icon && children ? (
80            <div className="flex grow gap-3">
81              <span className="mt-0.5 shrink-0">{icon}</span>
82              <div className="grow">{children}</div>
83            </div>
84          ) : (
85            <div className="grow">
86              {icon && <span className="me-3 inline-flex">{icon}</span>}
87              {children}
88            </div>
89          )}
90          {action && <div className="shrink-0">{action}</div>}
91        </div>
92      )}
93    </div>
94  )
95);
96Alert.displayName = "Alert";
97
98const ConfidentialAccessPage = () => {
99  return (
100    <div className="min-h-screen bg-background flex items-center justify-center p-4">
101      <div className="w-full max-w-md space-y-8">
102        <div className="text-center">
103          <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
104            <Lock className="w-8 h-8 text-red-600" />
105          </div>
106          <h1 className="text-2xl font-bold text-foreground mb-2">
107            Confidential Access
108          </h1>
109          <p className="text-muted-foreground">
110            This content is restricted and requires special permissions to
111            access.
112          </p>
113        </div>
114
115        <Alert
116          variant="error"
117          layout="complex"
118          icon={<AlertTriangle size={16} />}
119        >
120          <div>
121            <h3 className="font-medium text-sm mb-1">Access Denied</h3>
122            <p className="text-xs text-muted-foreground">
123              You don't have the necessary permissions to view this content.
124            </p>
125          </div>
126        </Alert>
127
128        <div className="space-y-4">
129          <div className="bg-muted/50 rounded-lg p-4 space-y-3">
130            <div className="flex items-center gap-3">
131              <Shield className="w-5 h-5 text-blue-600" />
132              <div>
133                <h3 className="font-medium text-sm">Security Level: High</h3>
134                <p className="text-xs text-muted-foreground">
135                  Requires administrator approval
136                </p>
137              </div>
138            </div>
139          </div>
140
141          <div className="space-y-3">
142            <Button className="w-full" variant="outline">
143              Request Access
144            </Button>
145            <Button className="w-full" variant="ghost">
146              Contact Administrator
147            </Button>
148          </div>
149        </div>
150      </div>
151    </div>
152  );
153};
154
155const ConfidentialAccessDemo = () => {
156  return (
157    <div className="space-y-4">
158      <ConfidentialAccessPage />
159    </div>
160  );
161};
162
163export default ConfidentialAccessDemo;