import type { Metadata } from "next";
import "./globals.css";
import { Providers } from "@/components/Providers";
import { EnvBadge } from "@/components/EnvBadge";

export const metadata: Metadata = {
    title: "Vantage Licensing",
    description: "Licences, instances and billing for Vantage.",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <header className="border-b border-rule bg-panel">
                    <div className="mx-auto flex max-w-rail flex-wrap items-center justify-between gap-4 px-5 py-4">
                        <span className="flex items-baseline gap-2 text-[1.16rem] font-extrabold tracking-[-0.02em]">
                            Vantage
                            <span className="font-mono text-[0.72rem] font-normal uppercase tracking-[0.14em] text-ink-3">
                                Licensing
                            </span>
                        </span>
                        <EnvBadge />
                    </div>
                </header>
                <Providers>{children}</Providers>
            </body>
        </html>
    );
}
