import '@/styles/globals.css';
import 'remixicon/fonts/remixicon.css';

import { type Metadata } from 'next';
import { Fira_Code } from 'next/font/google';
import localFont from 'next/font/local';
import { type ReactNode } from 'react';

import { cn, getURL } from '@/lib/utils';

const sans = localFont({
  variable: '--font-sans',
  src: './fonts/Karrik.woff2',
  weight: 'variable'
});

const code = Fira_Code({
  variable: '--font-code',
  subsets: ['latin'],
  weight: 'variable',
  display: 'swap'
});

export const metadata: Metadata = {
  title: {
    default: 'Peer-at Code',
    template: `%s - Peer-at Code`
  },
  description: "Apprendre la programmation et la cybersécurité en s'amusant.",
  // manifest: getURL('/favicon/site.webmanifest'),
  openGraph: {
    title: {
      default: 'Peer-at Code',
      template: `%s - Peer-at Code`
    },
    description: "Apprendre la programmation et la cybersécurité en s'amusant.",
    url: getURL(),
    siteName: 'Peer-at Code',
    // images: getURL('/assets/social.jpg'),
    type: 'website'
  },
  twitter: {
    card: 'summary_large_image',
    title: {
      default: 'Peer-at Code',
      template: `%s - Peer-at Code`
    },
    description: "Apprendre la programmation et la cybersécurité en s'amusant."
    // images: getURL('/assets/social.jpg'),
  },
  alternates: {
    canonical: getURL()
  },
  icons: {
    icon: [
      {
        url: getURL('/assets/icons/favicon-32x32.png'),
        sizes: '32x32'
      },
      {
        url: getURL('/assets/icons/favicon-16x16.png'),
        sizes: '16x16'
      }
    ],
    shortcut: getURL('/favicon.ico'),
    apple: getURL('/assets/icons/apple-touch-icon.png')
  },
  themeColor: '#110F15'
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html
      lang="fr"
      dir="ltr"
      className={cn(
        'scroll-smooth bg-gradient-to-b from-primary-800 to-primary-900 [color-scheme:dark]',
        sans.variable,
        code.variable
      )}
    >
      <head />
      <body className="relative min-h-screen">
        <main>{children}</main>
      </body>
    </html>
  );
}
