import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import {
    Card,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle
} from "@/components/ui/card";
import { Routes } from "@/config/routes";
import { Shell } from "@/components/shell";

export default function Forbidden() {
    return (
        <Shell className="flex h-[calc(100vh-120px)] flex-col items-center justify-center">
            <Card className="w-full max-w-xl rounded-none border-0 shadow-none">
                <CardHeader>
                    <CardTitle className="text-2xl font-bold md:text-4xl">
                        Ingen adgang
                    </CardTitle>
                    <CardDescription className="font-serif text-sm md:text-lg">
                        Beklager, du har ikke tilladelse til at se denne side.
                    </CardDescription>
                </CardHeader>

                <CardFooter>
                    <Link
                      className="text-client-red flex items-center gap-1 font-semibold uppercase hover:[&>svg]:-translate-x-2"
                      href={Routes.DASHBOARD.HOME}>
                        <ArrowLeft className="size-6 transition" />
                        <span>Tilbage til dashboard</span>
                    </Link>
                </CardFooter>
            </Card>
        </Shell>
    );
}