PageNav

import { PageNav } from 'boltdocs/primitives'

// docs/components/CustomFooterNav.tsx
import React from 'react'
import { PageNav } from 'boltdocs/primitives'
import { usePageNav } from 'boltdocs/client'

export default function CustomFooterNav() {
  const { prevPage, nextPage } = usePageNav()

  if (!prevPage && !nextPage) return null

  return (
    <PageNav.Root className="border-t border-subtle pt-8 mt-12 grid grid-cols-2 gap-4">
      {/* 1. Dirección de Página Anterior */}
      {prevPage ? (
        <PageNav.Link
          to={prevPage.path}
          direction="prev"
          className="group p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-primary-500 transition-colors"
        >
          <PageNav.Title className="text-xs uppercase font-bold text-zinc-400 dark:text-zinc-500 group-hover:text-primary-500 transition-colors">
            Capítulo Anterior
          </PageNav.Title>
          <PageNav.Description className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 mt-1">
            {prevPage.title}
          </PageNav.Description>
        </PageNav.Link>
      ) : (
        <div /> // Espaciador de compensación de columna
      )}

      {/* 2. Dirección de Página Siguiente */}
      {nextPage ? (
        <PageNav.Link
          to={nextPage.path}
          direction="next"
          className="group p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-primary-500 transition-colors text-right"
        >
          <PageNav.Title className="text-xs uppercase font-bold text-zinc-400 dark:text-zinc-500 group-hover:text-primary-500 transition-colors">
            Siguiente Capítulo
          </PageNav.Title>
          <PageNav.Description className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 mt-1">
            {nextPage.title}
          </PageNav.Description>
        </PageNav.Link>
      ) : (
        <div /> // Espaciador de compensación de columna
      )}
    </PageNav.Root>
  )
}