Error Layout

        <!--
@component
## 概要
- ErrorLayout は、ステータスコードに応じて見出しと説明文を切り替えるエラーページ向けレイアウトです

## 機能
- statusCode に応じて文言を切り替える
- TOPへ戻る導線を表示する

## Props
- statusCode: 表示するステータスコード

## Usage
```svelte
<ErrorLayout statusCode={404} />
```
-->

<script module lang="ts">
  export interface ErrorLayoutProps {
    /** 表示するHTTPステータスコード */
    statusCode?: number;
  }
</script>

<script lang="ts">
  import { buttonVariants } from '$lib/components/ui/atoms/Button.svelte';

  let { statusCode }: ErrorLayoutProps = $props();

  const url = '#';

  const defaultErrorMessageItem = {
    title: 'Error',
    message: '予期せぬエラーが発生しました。\nしばらくしてから再度お試しください。',
  };

  const errorMessageMap: Record<number, { title: string; message: string }> = {
    403: {
      title: 'Forbidden',
      message: 'このページを表示する権限がありません。',
    },
    404: {
      title: 'Page Not Found',
      message: 'ページが移動または削除された可能性があります。\nURLをご確認のうえ、もう一度お試しください。',
    },
    500: {
      title: 'Internal Server Error',
      message: 'サーバーで問題が発生しました。\nしばらく経ってから再度お試しください。',
    },
  };

  let errorMessageItem = $derived(errorMessageMap[statusCode!] ?? defaultErrorMessageItem);
</script>

<div class="flex items-center justify-center w-full min-h-svh px-4 py-12 bg-surface overflow-hidden" data-rabee-ui="error-layout">
  <div class="max-w-4xl w-full text-center">
    <div class="mb-4">
      {#if statusCode}
        <p class="font-semibold text-lg/tight text-primary mb-0.5">{statusCode}</p>
      {/if}
      <div class="font-semibold text-5xl/tight text-foreground max-md:text-4xl">
        {errorMessageItem.title}
      </div>
    </div>

    <p class="text-muted-foreground text-sm whitespace-pre-line mb-10">
      {errorMessageItem.message}
    </p>

    <a class={buttonVariants({ variant: 'primary', tone: 'solid', size: 'medium' })} href={url}>TOPへ戻る</a>
  </div>
</div>