import { getRouteApi } from '@tanstack/react-router'
import { AppShell } from '../ui/layout.tsx'
import { NotesDemo } from '../ui/notes-demo.tsx'
import { createRoutes } from '../routes.ts'
import { useAppShell } from '../router-context.ts'

const routeApi = getRouteApi('/notes')

export function NotesPage() {
	const { notes } = routeApi.useLoaderData()
	const { appBasePath } = useAppShell()
	const routes = createRoutes(appBasePath)
	return (
		<AppShell page="notes" heading="Notes">
			<NotesDemo notes={notes} actionHref={routes.notes.action.href()} />
		</AppShell>
	)
}