1"use client";
2
3import * as React from "react";
4import { useState } from "react";
5import { Lock, Shield } from "lucide-react";
6import { motion } from "framer-motion";
7import { cn } from "@/lib/utils";
8import { resolve } from "path";
9import { Button } from "@/components/ui/button";
10
11interface ConfidentialAccessProps {
12  title?: string;
13  description?: string;
14  icon?: React.ReactNode;
15  onRequestAccess?: () => void;
16  className?: string;
17}
18export default function Confidential_1({
19  title = "Confidential Access Required",
20  description = "This content is restricted and requires special authorization to view. Please contact your administrator or request access below.",
21  icon = <Lock className="h-12 w-12 text-muted-foreground" />,
22  onRequestAccess = () => console.log("Access requested"),
23  className,
24}: ConfidentialAccessProps) {
25  const [isRequesting, setIsRequesting] = useState(false);
26
27  const handleRequestAccess = async () => {
28    setIsRequesting(true);
29    await new Promise(() => setTimeout(resolve, 2000));
30    onRequestAccess();
31    setIsRequesting(false);
32  };
33
34  return (
35    <motion.div
36      initial={{ opacity: 0, y: 20 }}
37      animate={{ opacity: 1, y: 0 }}
38      transition={{ duration: 0.5 }}
39      className={cn(
40        "flex min-h-screen items-center justify-center bg-background p-4",
41        className
42      )}
43    >
44      <div className="w-full max-w-md space-y-8">
45        <motion.div
46          initial={{ scale: 0.9 }}
47          animate={{ scale: 1 }}
48          transition={{ delay: 0.2, duration: 0.3 }}
49          className="text-center"
50        >
51          <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-muted">
52            {icon}
53          </div>
54          <h1 className="text-2xl font-bold text-foreground">{title}</h1>
55          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
56        </motion.div>
57
58        <motion.div
59          initial={{ opacity: 0 }}
60          animate={{ opacity: 1 }}
61          transition={{ delay: 0.4, duration: 0.3 }}
62          className="space-y-4"
63        >
64          <div className="rounded-lg border border-border bg-card p-4">
65            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
66              <Shield className="h-4 w-h4" />
67              <span>Secure Authentication required</span>
68            </div>
69          </div>
70
71          <Button
72            onClick={handleRequestAccess}
73            disabled={isRequesting}
74            className="w-full"
75            size="lg"
76          >
77            {isRequesting ? (
78              <motion.div
79                animate={{ rotate: 360 }}
80                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
81                className="h-4 w-4 rounded-full border-2 border-current border-t-transparent"
82              ></motion.div>
83            ) : (
84              "Request Access"
85            )}
86          </Button>
87
88          <div className="texxt-center">
89            <Button variant="link" className="text-sm">
90              Contact Administrator
91            </Button>
92          </div>
93        </motion.div>
94      </div>
95    </motion.div>
96  );
97}