import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router'
import * as React from 'react'
import appCss from '~/styles/app.css?url'
import { SiteHeader } from '~/components/site-header'
import { SiteFooter } from '~/components/site-footer'
import { getSettings } from '~/lib/data'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'theme-color', content: '#1a120b' },
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
    scripts: [],
  }),
  loader: () => getSettings(),
  shellComponent: RootDocument,
  component: SiteLayout,
})

function SiteLayout() {
  const settings = Route.useLoaderData()

  return (
    <>
      <SiteHeader />
      <main className="w-full bg-surface pt-20">
        <Outlet />
      </main>
      <SiteFooter settings={settings} />
    </>
  )
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}
