import { Head } from '@inertiajs/react'
import { useEffect } from 'react'
import MarkdocRenderer from '~/components/MarkdocRenderer'
import DocsLayout from '~/layouts/DocsLayout'

export default function Show({ content }: { content: any; }) {
  // Deep-link support: when arriving at /docs/<slug>#<anchor> (e.g. from a Supply Depot app's
  // "Docs" menu item), scroll to that section. The content renders synchronously from props, so a
  // double rAF lets the headings paint before we look one up.
  useEffect(() => {
    const hash = decodeURIComponent(window.location.hash.replace(/^#/, ''))
    if (!hash) return
    requestAnimationFrame(() =>
      requestAnimationFrame(() => {
        document.getElementById(hash)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
      })
    )
  }, [content])

  return (
    <DocsLayout>
      <Head title={'Documentation'} />
      <div className="xl:pl-80 pt-14 xl:pt-8 pb-8 px-6 sm:px-8 lg:px-12">
        <div className="max-w-4xl">
          <MarkdocRenderer content={content} />
        </div>
      </div>
    </DocsLayout>
  )
}
