"use client";

import Link from "next/link";
import { useEffect } from "react";
import { AlertTriangle } from "lucide-react";

import { ButtonLink } from "@/components/ui/button-link";
import { Button } from "@/components/ui/button";
import { siteConfig } from "@/lib/constants/site";

export default function SiteError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[site error]", error);
  }, [error]);

  return (
    <div className="mx-auto flex min-h-[70vh] max-w-lg flex-col items-center justify-center px-6 py-20 text-center">
      <div className="flex size-14 items-center justify-center rounded-2xl border border-destructive/30 bg-destructive/10 text-destructive">
        <AlertTriangle className="size-7" aria-hidden />
      </div>
      <p className="font-display mt-8 text-3xl tracking-wide text-foreground">Something broke</p>
      <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
        This page couldn&apos;t finish loading. You can try again or use the links below — your
        cart and programs are still here.
      </p>
      <div className="mt-10 flex flex-wrap justify-center gap-3">
        <Button type="button" onClick={() => reset()} className="rounded-full px-8">
          Try again
        </Button>
        <ButtonLink href="/" variant="outline" className="rounded-full px-8">
          Home
        </ButtonLink>
        <ButtonLink href="/programs" variant="outline" className="rounded-full px-8">
          Programs
        </ButtonLink>
      </div>
      <p className="mt-10 text-xs text-muted-foreground">
        Need help?{" "}
        <Link href="/contact" className="text-primary underline-offset-4 hover:underline">
          Contact
        </Link>
        {" · "}
        <Link href="/dashboard" className="text-primary underline-offset-4 hover:underline">
          Dashboard
        </Link>
      </p>
      <p className="mt-6 font-display text-lg text-muted-foreground">{siteConfig.name}</p>
    </div>
  );
}