"use client";

import Link from "next/link";

export default function PostDetailError({
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <main className="mx-auto max-w-lg px-4 py-16 text-center sm:px-8 sm:py-20">
      <p className="font-ctkp-display text-2xl font-semibold text-stone-100">Trang chưa mở được</p>
      <p className="mt-4 text-sm leading-relaxed text-stone-500">
        Nguồn chữ tạm không trả lời hoặc đường nối gián đoạn. Mời thử lại khi lòng đã nhẹ hơn.
      </p>
      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          onClick={() => reset()}
          className="rounded-lg border border-stone-600/45 bg-stone-950/40 px-6 py-3 text-sm font-medium text-stone-200 transition-colors duration-200 ease-ctkp hover:border-stone-500/50 hover:bg-stone-950/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-600/30"
        >
          Thử lại
        </button>
        <Link
          href="/posts"
          className="ctkp-btn-primary px-6 py-3"
        >
          Về sổ bài
        </Link>
      </div>
    </main>
  );
}