"use client";

import Link from "next/link";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/container";
import { MinimalHeader } from "@/components/headers/minimal-header";
import { SlimFooter } from "@/components/footers/slim-footer";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Hook up real error reporting in Phase 7. Never leak stack traces in prod.
    console.error(error);
  }, [error]);

  return (
    <div className="flex min-h-dvh flex-col">
      <MinimalHeader />
      <main id="main" className="flex-1">
        <Container className="flex max-w-xl flex-col items-center py-24 text-center md:py-32">
          <h1 className="font-display text-3xl font-medium tracking-tight">
            Something went wrong
          </h1>
          <p className="mt-3 text-pretty text-muted-foreground">
            An unexpected error occurred. You can try again, or head back home.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Button variant="brand" size="pill" onClick={() => reset()}>
              Try again
            </Button>
            <Button asChild variant="outline" size="pill">
              <Link href="/">Back to home</Link>
            </Button>
          </div>
          <Button asChild variant="ghost" size="sm" className="mt-4">
            <Link href="/contact">Contact support</Link>
          </Button>
        </Container>
      </main>
      <SlimFooter />
    </div>
  );
}