import type { Metadata } from "next";
import type { CSSProperties } from "react";
import { SiteHeader } from "../components/SiteHeader";
import { SiteFooter } from "../components/SiteFooter";
import { institution } from "../config/institution";
import { branding } from "../config/branding";
import "./globals.css";
const appUrl = process.env.APP_URL || "http://localhost:3000";
export const metadata: Metadata = {
  metadataBase: new URL(appUrl),
  title: {
    default: institution.name,
    template: `%s | ${institution.shortName}`,
  },
  description: institution.description,
  openGraph: {
    title: institution.name,
    description: institution.description,
    locale: "pt_PT",
    type: "website",
  },
  icons: { icon: "/favicon.svg" },
};
export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const style = {
    "--primary": branding.primaryColor,
    "--secondary": branding.secondaryColor,
    "--accent": branding.accentColor,
    "--ink": branding.ink,
    "--paper": branding.background,
    "--heading": branding.fontHeading,
    "--body": branding.fontBody,
    "--radius": branding.radius,
    "--container": branding.container,
    "--space": branding.spacing,
  } as CSSProperties;
  return (
    <html lang="pt-PT" style={style}>
      <body>
        <a className="skip-link" href="#conteudo">
          Saltar para o conteúdo
        </a>
        <SiteHeader />
        {children}
        <SiteFooter />
      </body>
    </html>
  );
}