import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";

import "../(marketing)/marketing.css";
import DonateModal from "../../components/donate-modal";
import NavLink from "../../components/nav-link";
import { logoutAction } from "./dashboard/actions";

export default function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <header className="site-header">
        <div className="brand">
          <Link href="/" aria-label="WOW Checkout home">
            <Image
              className="brand-logo"
              src="/logo.png"
              alt="WOW Checkout logo"
              width={128}
              height={128}
              priority
            />
          </Link>
          <Link className="name" href="/">
            WOW Checkout
          </Link>
        </div>
        <nav className="nav">
          <NavLink href="/invoice">Check Invoice</NavLink>
          <NavLink href="/docs">Documentation</NavLink>
          <NavLink href="/faq">FAQ</NavLink>
          <NavLink href="/dashboard">Dashboard</NavLink>
          <form action={logoutAction}>
            <button type="submit">Log out</button>
          </form>
        </nav>
      </header>
      {children}
      <footer className="site-footer">
        <div className="site-footer-copy">
          <p>wowcheckout.com - Non-custodial Wownero checkout software.</p>
          <p>
            Hosted by{" "}
            <Link
              className="underline underline-offset-4"
              href="https://such.software"
            >
              Such Software
            </Link>
            {" · "}
            <Link
              className="underline underline-offset-4"
              href="https://github.com/Such-Software/wowcheckout"
            >
              GitHub
            </Link>
          </p>
        </div>
        <Suspense fallback={null}>
          <DonateModal />
        </Suspense>
      </footer>
    </div>
  );
}