'use client';

import React from 'react';
import { Button, Link } from '@theme/components';
import { useLocalization } from '@akinon/next/hooks';

/**
 * The code-owned 500 markup, shared by the real error boundary's fallback and
 * the /500 preview page. Mirrors PzErrorPage's server-error branch, minus the
 * `reset` dependency an error boundary alone can provide.
 */
export default function ServerErrorContent() {
  const { t } = useLocalization();

  const reloadPage = () => {
    if (typeof window !== 'undefined') {
      window.location.reload();
    }
  };

  return (
    <section className="text-center px-6 my-14 md:px-0 md:m-14">
      <div className="text-7xl font-bold md:text-8xl">500</div>
      <h1 className="text-lg md:text-xl"> {t('common.page_500.title')} </h1>
      <p className="text-lg md:text-xl"> {t('common.page_500.description')} </p>

      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
        <Link href="/" className="text-lg underline">
          {t('common.page_500.link_text')}
        </Link>
        <Button onClick={reloadPage} className="text-lg">
          {t('common.try_again')}
        </Button>
      </div>
    </section>
  );
}