import Link from "next/link";
import { LobbyView } from "./LobbyView";

export default function LobbyPage() {
  return (
    <main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-4 p-6">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-bold" style={{ color: "var(--accent)" }}>
          大廳
        </h1>
        <div className="flex gap-3">
          <Link href="/tasks" className="text-xs" style={{ color: "var(--ink-soft)" }}>
            委託
          </Link>
          <Link href="/settings" className="text-xs" style={{ color: "var(--ink-soft)" }}>
            設定
          </Link>
          <Link href="/canon-review" className="text-xs" style={{ color: "var(--ink-soft)" }}>
            待裁決
          </Link>
          <Link href="/epilogue" className="text-xs" style={{ color: "var(--ink-soft)" }}>
            後日談
          </Link>
          <Link href="/room" className="text-xs" style={{ color: "var(--ink-soft)" }}>
            建立房間
          </Link>
        </div>
      </div>
      <LobbyView />
    </main>
  );
}