import Image from "next/image";
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";

export default function Forbidden() {
    return (
        <div className="w-screen flex h-screen flex-col items-center justify-center">
            <Card className="w-full max-w-xl rounded-none border-0 shadow-none">
                <CardHeader>
                    <Link href={Routes.HOME} className="w-fit">
                        <Image
                          src="/logo.svg"
                          alt="Magasinet KBH"
                          width={120}
                          height={120}
                          className="size-[80px] md:size-[120px]"
                          priority />
                    </Link>
                    <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.HOME}>
                        <ArrowLeft className="size-6 transition" />
                        <span>Tilbage til forsiden</span>
                    </Link>
                </CardFooter>
            </Card>
        </div>
    );
}