"use client"

import React from "react";
import { Button, Card, CardBody, CardFooter, CardHeader } from "@heroui/react";
import { Icon } from "@iconify/react";

export default function Page() {
    return (
        <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-background to-content2 p-4">
            <Card className="max-w-md w-full shadow-lg">
                <CardHeader className="flex flex-col gap-2 items-center justify-center pt-8 pb-0">
                    <div className="rounded-full bg-danger-100 p-3">
                        <Icon
                            icon="lucide:shield-alert"
                            className="text-danger h-10 w-10"
                            aria-hidden="true"
                        />
                    </div>
                    <h1 className="text-2xl font-semibold text-center mt-4">Unauthorized Access</h1>
                </CardHeader>
                <CardBody className="py-6 text-center">
                    <p className="text-foreground-600 mb-4">
                        You don&apos;t have permission to access this page. Please contact your administrator if you believe this is an error.
                    </p>
                    <div className="bg-content2 rounded-medium p-4 text-left">
                        <div className="flex items-center gap-2 mb-2">
                            <Icon icon="lucide:info" className="text-primary" />
                            <span className="font-medium">Error Code:</span>
                            <span className="text-foreground-600">403 Forbidden</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <Icon icon="lucide:clock" className="text-primary" />
                            <span className="font-medium">Timestamp:</span>
                            <span className="text-foreground-600">{new Date().toLocaleString()}</span>
                        </div>
                    </div>
                </CardBody>
                <CardFooter className="flex flex-col gap-2 pt-0 pb-8">
                    <Button
                        color="primary"
                        className="w-full"
                        startContent={<Icon icon="lucide:home" />}
                        onPress={() => window.location.href = "/"}
                    >
                        Return to Home
                    </Button>
                    <Button
                        variant="flat"
                        color="default"
                        className="w-full"
                        startContent={<Icon icon="lucide:help-circle" />}
                        onPress={() => window.location.href = "/login"}
                    >
                        Login
                    </Button>
                </CardFooter>
            </Card>
        </div>
    );
}