1"use client";
2
3import * as React from "react";
4import { Lock, Shield } from "lucide-react";
5import { motion } from "framer-motion";
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8
9interface ConfidentialAccessPageProps {
10  title?: string;
11  description?: string;
12  onRequestAccess?: () => void;
13  className?: string;
14}
15
16const ConfidentialAccessPage = ({
17  title = "Confidential Access Required",
18  description = "This content requires special authorization to view.",
19  onRequestAccess,
20  className,
21}: ConfidentialAccessPageProps) => {
22  return (
23    <div
24      className={cn(
25        "min-h-screen bg-background flex items-center justify-center p-4",
26        className
27      )}
28    >
29      <motion.div
30        initial={{ opacity: 0, y: 20 }}
31        animate={{ opacity: 1, y: 0 }}
32        transition={{ duration: 0.5 }}
33        className="max-w-md w-full text-center space-y-6"
34      >
35        <motion.div
36          initial={{ scale: 0 }}
37          animate={{ scale: 1 }}
38          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
39          className="mx-auto w-20 h-20 bg-destructive/10 rounded-full flex items-center justify-center"
40        >
41          <Shield className="w-10 h-10 text-destructive" />
42        </motion.div>
43
44        <div className="space-y-2">
45          <h1 className="text-2xl font-bold text-foreground">{title}</h1>
46          <p className="text-muted-foreground">{description}</p>
47        </div>
48
49        <div className="space-y-4">
50          <div className="flex items-center justify-center space-x-2 text-sm text-muted-foreground">
51            <Lock className="w-4 h-4" />
52            <span>Restricted Content</span>
53          </div>
54
55          <Button onClick={onRequestAccess} className="w-full">
56            Request Access
57          </Button>
58
59          <Button variant="outline" className="w-full">
60            Go Back
61          </Button>
62        </div>
63      </motion.div>
64    </div>
65  );
66};
67
68function ConfidentialAccessDemo() {
69  return (
70    <div className="min-h-screen bg-background">
71      <ConfidentialAccessPage
72        onRequestAccess={() => alert("Access requested!")}
73      />
74    </div>
75  );
76}
77
78export default ConfidentialAccessDemo;