---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import { buttonVariants } from '@/components/ui/button'
import Layout from '@/layouts/Layout.astro'
import { cn } from '@/lib/utils'
---

<Layout class="max-w-3xl">
  <PageHead slot="head" title="500" />
  <Breadcrumbs items={[{ label: 'Error', icon: 'lucide:server-off' }]} />

  <section class="flex flex-col items-center justify-center gap-y-4 text-center">
    <div class="max-w-md">
      <h1 class="mb-4 text-3xl font-medium">500: Something went wrong</h1>
      <p class="prose">
        服务器爆炸了！如果你能联系到博主的话提醒他一声吧！
      </p>
    </div>
    <Link
      href="/"
      class={cn(buttonVariants({ variant: 'outline' }), 'flex gap-x-1.5 group')}
    >
      <span class="transition-transform group-hover:-translate-x-1">&larr;</span>
      Go to home page
    </Link>
  </section>
</Layout>