import { Navigate, useParams } from "react-router"
import * as React from "react"

import {
  DesignSystemDocPage,
  DesignSystemNotFound,
} from "@/components/design-system/design-system-doc-page"
import { getDesignSystemEntry } from "@/lib/design-system/registry"

const DOC_SUSPENSE_FALLBACK = (
  <div className="flex min-h-64 flex-col gap-4">
    <div className="h-8 w-64 max-w-full rounded-md bg-muted" />
    <div className="min-h-44 rounded-lg bg-muted" />
  </div>
)

export default function DesignSystemDocRoute() {
  const { slug } = useParams<{ slug: string }>()
  const entry = getDesignSystemEntry(slug)

  if (!entry) {
    return <DesignSystemNotFound slug={slug ?? ""} />
  }

  if (entry.parentSlug) {
    return <Navigate to={`../${entry.parentSlug}#${entry.slug}`} replace />
  }

  return (
    <React.Suspense fallback={DOC_SUSPENSE_FALLBACK}>
      <DesignSystemDocPage entry={entry} />
    </React.Suspense>
  )
}