"use client";

import { useEffect } from "react";
import Link from "next/link";
import styles from "./error.module.css";
import {
  ArrowCounterClockwiseIcon,
  ArrowLeftIcon,
} from "@phosphor-icons/react/dist/ssr";

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <main className={styles.wrapper}>
      <span className={styles.ghost} aria-hidden="true">
        500
      </span>

      <div className={styles.content}>
        <p className={styles.label}>Serverfehler</p>
        <h1 className={styles.heading}>Etwas ist schiefgelaufen</h1>
        <p className={styles.description}>
          Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es erneut oder
          komm später zurück.
        </p>

        <div className={styles.actions}>
          <button
            type="button"
            onClick={reset}
            className={`btn btn--filled ${styles.cta}`}
          >
            <ArrowCounterClockwiseIcon className="btn-icon" size={18} />
            Erneut versuchen
          </button>

          <Link href="/" className={`btn btn--outline ${styles.cta}`}>
            <ArrowLeftIcon className="btn-icon" size={18} />
            Zurück zur Startseite
          </Link>
        </div>
      </div>
    </main>
  );
}