import Link from "next/link";

type AccessDeniedProps = {
  message?: string;
};

export default function AdminAccessDenied({
  message = "You do not have permission to view this page.",
}: AccessDeniedProps) {
  return (
    <main className="min-h-screen flex items-center justify-center px-6 py-12 bg-stone-100">
      <div className="w-full max-w-md">
        <div className="card p-8 text-center">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-red-50 border border-red-200">
            <svg
              className="h-7 w-7 text-red-500"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
              />
            </svg>
          </div>
          <h1 className="mt-6 text-xl font-semibold text-stone-950">
            Access Denied
          </h1>
          <p className="mt-2 text-sm text-stone-500">{message}</p>
          <Link
            href="/login"
            className="mt-6 inline-flex items-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-medium text-white transition-all shadow-sm"
          >
            Go to Login
          </Link>
          <Link
            href="/"
            className="mt-3 block text-sm text-stone-500 hover:text-stone-700 underline-offset-2 hover:underline"
          >
            Return to homepage
          </Link>
        </div>
      </div>
    </main>
  );
}