---
import Layout from "../layouts/Layout.astro";
import { House, ArrowLeft } from "@lucide/astro";

interface Props {
  error?: unknown;
}

const { error } = Astro.props;

// Sanitize error for display - NEVER expose sensitive server details in production
const displayMessage =
  "An unexpected error occurred while processing your request.";

// Log full error server-side for debugging (only visible in server logs)
if (error instanceof Error) {
  console.error("500 Server Error:", {
    message: error.message,
    stack: error.stack,
    timestamp: new Date().toISOString(),
  });
}
---

<Layout
  title="500 - Server Error | Another Hadi"
  description="An error occurred while processing your request."
>
  <div class="min-h-screen flex items-center justify-center px-4 py-20">
    <div class="text-center max-w-2xl mx-auto">
      <!-- Large 500 Number -->
      <h1 class="text-9xl font-bold text-error mb-4 animate-pulse">500</h1>

      <!-- Error Title -->
      <h2 class="text-4xl font-bold mb-4">Server Error</h2>

      <!-- Error Description -->
      <p class="text-xl mb-8 text-base-content/70">
        {displayMessage}
        <br />
        Please try again later or contact me if the problem persists.
      </p>

      <!-- Divider -->
      <div class="divider"></div>

      <!-- Action Buttons -->
      <div class="flex gap-4 justify-center flex-wrap mt-8">
        <a href="/" class="btn btn-primary gap-2">
          <House class="size-5" />
          Go Home
        </a>
        <button onclick="history.back()" class="btn btn-outline gap-2">
          <ArrowLeft class="size-5" />
          Go Back
        </button>
      </div>

      <!-- Helpful Links -->
      <div class="mt-8">
        <p class="text-sm text-base-content/60 mb-4">Need help?</p>
        <div class="flex gap-3 justify-center flex-wrap text-sm">
          <a href="/#contact" class="link link-hover">Contact</a>
          <span class="text-base-content/30">•</span>
          <a
            href="https://github.com/anotherhadi/blog/issues"
            target="_blank"
            rel="noopener noreferrer"
            class="link link-hover">Report Issue</a
          >
          <span class="text-base-content/30">•</span>
          <a href="/blog" class="link link-hover">Blog</a>
          <span class="text-base-content/30">•</span>
          <a href="/projects" class="link link-hover">Projects</a>
          <span class="text-base-content/30">•</span>
          <a href="/notes" class="link link-hover">Infosec Notes</a>
        </div>
      </div>
    </div>
  </div>
</Layout>