"use client";

import { useRouter } from "next/navigation";
import { useTheme } from "next-themes";

import Button from "@/components/common/button";
import { NOT_FOUND_PAGE_PARTICIPANT_BTN_LIST } from "@/constants/ui-helpers";
import NotFoundErrorSprite from "@/components/common/sprites/404-error-sprite";

function NotFoundParticipant() {
  const router = useRouter();
  const { theme } = useTheme();

  return (
    <div className="flex flex-col items-center justify-center text-center space-y-4 py-24 bg-participant-light dark:bg-participant-dark">
      <NotFoundErrorSprite mode={theme as "light" | "dark"} width={250} />
      <h1 className="font-inter font-black text-6xl">Page not found</h1>
      <h2 className="font-noto">
        We&apos;re sorry, but we can&apos;t find the page you&apos;re looking
        for.
      </h2>
      <p className="font-noto">
        The page might have existed in the past or it could have a typo. Here
        are some helpful links instead:
      </p>
      <div className="flex flex-col space-y-3 space-x-0 md:flex-row md:space-x-3 md:space-y-0">
        {NOT_FOUND_PAGE_PARTICIPANT_BTN_LIST.map(
          ({ label, href, icon: Icon }) => {
            return (
              <Button
                key={label}
                btnLabel={label}
                customVariant="primary"
                startContent={Icon ? <Icon /> : undefined}
                onClick={() => router.push(href)}
              />
            );
          },
        )}
      </div>
    </div>
  );
}

export default NotFoundParticipant;