import Image from "next/image";
import type { ReactNode } from "react";
import { ThemeToggle } from "@/components/layout/theme";
import { PreviewLink } from "@/components/layout/preview-context";
export default function PaymentLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen bg-background">
      <header className="border-b bg-card">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 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>
          <div className="flex items-center gap-4">
            <span className="text-sm text-muted-foreground">
              Payment Portal · Preview
            </span>
            <ThemeToggle />
          </div>
        </div>
      </header>
      <main className="mx-auto max-w-7xl px-5 py-8">{children}</main>
    </div>
  );
}