import { Button } from "@documenso/ui";
import Logo from "../components/logo";
import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";

export default function Custom500() {
  return (
    <>
      <div className="relative flex min-h-full flex-col items-center justify-center bg-black text-white">
        <div className="absolute top-10 left-10">
          <Logo dark className="w-10 md:w-20" />
        </div>

        <div className="mt-20 max-w-7xl px-4 py-10">
          <p className="inline-flex items-center text-3xl font-bold sm:text-5xl">
            500
            <span className="relative -top-1.5 px-3 font-thin sm:text-6xl">|</span>{" "}
            <span className="align-middle text-base font-semibold sm:text-2xl">
              Something went wrong.
            </span>
          </p>
          <div className="mt-10 flex justify-center">
            <Button color="secondary" href="/" icon={ArrowSmallLeftIcon}>
              Back to home
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}