import { ArrowLeft, LockKeyhole } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../shared/ui/Button";

export function ForbiddenPage() {
  const navigate = useNavigate();
  return (
    <div className="grid min-h-screen place-items-center bg-paper px-4">
      <div className="max-w-lg text-center">
        <div className="mx-auto grid size-20 place-items-center rounded-full bg-accent-soft text-accent">
          <LockKeyhole className="size-9" />
        </div>
        <p className="mt-6 text-xs font-bold uppercase tracking-widest text-accent">Ошибка 403</p>
        <h1 className="mt-3 font-serif text-4xl">Недостаточно прав</h1>
        <p className="mt-4 leading-7 text-muted">
          Этот раздел доступен другой роли. В тестовом кабинете роль можно переключить в верхней панели.
        </p>
        <Button className="mt-7" icon={<ArrowLeft className="size-4" />} onClick={() => navigate("/cabinet")}>
          Вернуться в кабинет
        </Button>
      </div>
    </div>
  );
}
