"use client";

import ErrorSVG from "@/assets/illustrations/Error.svg";

import Button from "@/components/Button/Button";

import styles from "./error.module.scss";

export default function ErrorPage({
  error,
  retry,
}: {
  error: Error & { digest?: string };
  retry: () => void;
}) {
  return (
    <div className={styles["error"]}>
      <div className={styles["error__wrapper"]}>
        <ErrorSVG className={styles["error__illustration"]} />

        <div className={styles["error__body"]}>
          <h1 className={styles["error__heading"]}>
            Упс! Что-то пошло не-так :(
          </h1>

          <div className={styles["error__description-container"]}>
            <p className={styles["error__description"]}>
              Мы приносим свои извинения и уже работаем над решением этой
              проблемы.
              <br />
              Пожалуйста попробуйте позже.
            </p>

            <p className={styles["error__message"]}>Ошибка: {error.message}</p>
          </div>

          <div className={styles["error__action-group"]}>
            <Button variant="primary" size="medium" href="/" fill>
              Вернуться на главную
            </Button>
            <Button
              size="medium"
              fill
              onClick={() => {
                retry();
              }}
            >
              Попробовать ещё раз
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}