import type { Metadata } from "next";
import type { CSSProperties } from "react";
import type { ReactNode } from "react";
import { publicConfiguration } from "@/config/public";
import "@/styles/tokens.css";
import "./globals.css";

export const metadata: Metadata = {
  ...(publicConfiguration.business.publicUrl === undefined
    ? {}
    : { metadataBase: new URL(publicConfiguration.business.publicUrl) }),
  description:
    publicConfiguration.content.metadata.defaultDescription ??
    "A standalone storefront awaiting approved business content and commerce data.",
  title: {
    default:
      publicConfiguration.content.metadata.defaultTitle ?? publicConfiguration.business.displayName,
    template: `%s | ${publicConfiguration.business.displayName}`,
  },
};

export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
  const themeStyle: ThemeStyle = {};
  const { accent, background, foreground } = publicConfiguration.theme.colors;
  if (accent !== undefined) themeStyle["--color-accent"] = accent;
  if (background !== undefined) themeStyle["--color-canvas"] = background;
  if (foreground !== undefined) themeStyle["--color-text"] = foreground;

  return (
    <html data-scroll-behavior="smooth" lang={publicConfiguration.business.locale}>
      <body style={themeStyle}>{children}</body>
    </html>
  );
}

type ThemeStyle = CSSProperties & {
  "--color-accent"?: string;
  "--color-canvas"?: string;
  "--color-text"?: string;
};