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

import FooterMainNav, { FooterMainNavSkeleton } from "./MainNav"
import FooterSecondaryNav, { FooterSecondaryNavSkeleton } from "./SecondaryNav"

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

export default async function FooterNavigation() {
  const footer = await getFooter()
  if (!footer) {
    return null
  }

  return (
    <section className={styles.section}>
      <div className={styles.maxWidth}>
        <FooterMainNav mainLinks={footer.mainLinks} />
        <FooterSecondaryNav
          secondaryLinks={footer.secondaryLinks}
          appDownloads={footer.appDownloads}
        />
      </div>
    </section>
  )
}

export function FooterNavigationSkeleton() {
  return (
    <section className={styles.section}>
      <div className={styles.maxWidth}>
        <FooterMainNavSkeleton />
        <FooterSecondaryNavSkeleton />
      </div>
    </section>
  )
}