/**
 * 500 Server Error page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import React from 'react';
import type { JSX } from 'react';
import { Link } from 'react-router-dom';

export default function ServerErrorPage(): JSX.Element {
  return (
    <div className="page-container flex items-center justify-center min-h-[60vh]">
      <div className="text-center">
        <h1 className="text-6xl font-bold text-muted mb-4">500</h1>
        <h2 className="text-xl font-semibold text-foreground mb-2">Server error</h2>
        <p className="text-muted mb-6">
          Something went wrong on our end. Please try again later.
        </p>
        <Link to="/" className="btn-primary">
          Go home
        </Link>
      </div>
    </div>
  );
}
