import type { Metadata } from "next";
import { Suspense } from "react";
import Image from "next/image";
import { ThemeToggle } from "@/components/layout/theme";
import { PreviewLink } from "@/components/layout/preview-context";
import { OnboardingWizard } from "@/features/onboarding/onboarding-wizard";
export const metadata: Metadata = { title: "Onboarding Setup" };
export default function OnboardingPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="border-b bg-card">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
          <PreviewLink href="/">
            <Image
              src="/images/logo/logo.svg"
              width={939}
              height={351}
              alt="TIAR"
              className="h-9 w-auto dark:brightness-0 dark:invert"
            />
          </PreviewLink>
          <ThemeToggle />
        </div>
      </header>
      <main className="mx-auto max-w-6xl px-5 py-10">
        <Suspense>
          <OnboardingWizard />
        </Suspense>
      </main>
    </div>
  );
}