import type { Metadata } from "next";
import Link from "next/link";

import { Icon } from "@/components/icons";

export const metadata: Metadata = { title: "Kein Zugriff" };

export default function NoAccessPage() {
  return (
    <div className="mx-auto max-w-md px-4 py-20 text-center sm:px-6">
      <span className="mx-auto flex size-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
        <Icon name="lock" className="size-7" />
      </span>
      <h1 className="mt-5 text-2xl font-bold text-slate-900">Kein Zugriff</h1>
      <p className="mt-2 text-slate-600">
        Für diesen Bereich fehlt dir die nötige Berechtigung. Wenn du meinst,
        dass das ein Versehen ist, wende dich an einen Administrator.
      </p>
      <Link
        href="/"
        className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
      >
        Zur Startseite
      </Link>
    </div>
  );
}