import { Suspense } from "react"

import { getFooter } from "@/lib/trpc/memoizedRequests"

import FooterDetails, { FooterDetailsSkeleton } from "./Details"
import FooterNavigation, { FooterNavigationSkeleton } from "./Navigation"

import styles from "./footer.module.css"

function preload() {
  void getFooter()
}

export default async function Footer() {
  preload()

  return (
    <footer className={styles.footer}>
      <Suspense fallback={<FooterNavigationSkeleton />}>
        <FooterNavigation />
      </Suspense>
      <Suspense fallback={<FooterDetailsSkeleton />}>
        <FooterDetails />
      </Suspense>
    </footer>
  )
}