"use client";

// Kök hata sınırı: beklenmedik sunucu/istemci hatalarında Next'in çıplak
// hata ekranı yerine markalı, kurtarılabilir bir ekran gösterir.

import { useEffect } from "react";
import Link from "next/link";
import { TriangleAlert } from "lucide-react";
import { Button } from "@/components/ui/button";

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

  return (
    <main className="mx-auto flex min-h-[60vh] w-full max-w-md flex-col items-center justify-center px-4 py-16 text-center">
      <TriangleAlert className="size-10 text-amber-500" aria-hidden />
      <h1 className="mt-4 font-heading text-2xl font-bold">
        Bir şeyler ters gitti
      </h1>
      <p className="mt-2 text-sm leading-6 text-slate-600">
        Beklenmedik bir hata oluştu. Tekrar dener misin? Sorun devam ederse
        birkaç dakika sonra yeniden gel — verilerin güvende.
      </p>
      <div className="mt-6 flex gap-3">
        <Button
          onClick={reset}
          className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
        >
          Tekrar dene
        </Button>
        <Button asChild variant="outline" className="cursor-pointer">
          <Link href="/">Ana sayfaya dön</Link>
        </Button>
      </div>
    </main>
  );
}
