import type { Metadata, Viewport } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "muse",
  description: "Request a song, get it in your library, correctly tagged.",
};

/**
 * System fonts on purpose. next/font self-hosts a webfont — fine for the CSP,
 * but it makes the Docker build reach out to Google at build time, and
 * -apple-system resolves to SF Pro on the devices this is actually used from,
 * which is the look being aimed at anyway.
 *
 * themeColor is a pair rather than a single hex: it paints the browser's own
 * chrome on mobile, and a hardcoded dark value left a black status bar sitting
 * above a white page for anyone using the light theme.
 */
export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#f6f7f9" },
    { media: "(prefers-color-scheme: dark)", color: "#0a0b0f" },
  ],
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="h-full antialiased">
      <body className="flex min-h-full flex-col">{children}</body>
    </html>
  );
}