import Link from "next/link";
import { Button } from "@/components/ui/button";
const ModeratorOnly = () => {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4 text-center">
      <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-8 shadow-md">
        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-8 w-8 text-red-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 15v2m0 0v2m0-2h2m-2 0H9m3-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v1M4 20h16a1 1 0 001-1V7a1 1 0 00-1-1h-5m-9 0h1"
            />
          </svg>
        </div>
        <h1 className="mb-2 text-2xl font-bold text-gray-800">Access Denied</h1>
        <p className="mb-6 text-gray-600">
          Sorry, you don&apos;t have permission to access this area. This
          section is restricted to Moderators only.
        </p>
        <div className="flex flex-col space-y-3">
          <Link href="/" className="w-full">
            <Button className="w-full bg-[#03045E] hover:bg-[#02034b]">
              Go to Home Page
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
};
export default ModeratorOnly;