import { useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { PageView } from '~/components/page-view'
import { pageBySlugQuery } from '~/lib/queries'

export const Route = createFileRoute('/')({
  loader: async ({ context: { queryClient } }) => {
    await queryClient.ensureQueryData(pageBySlugQuery('home'))
  },
  component: HomePage,
})

function HomePage() {
  const { data: page } = useSuspenseQuery(pageBySlugQuery('home'))
  if (!page) {
    return (
      <div className="py-10">
        <h1 className="text-3xl font-bold">Welcome</h1>
        <p className="text-muted-foreground mt-2">No home page content configured in Directus.</p>
      </div>
    )
  }
  return <PageView title={page.title} content={page.content} />
}