import { useSuspenseQuery } from "@tanstack/react-query"
import { usePlatform } from "@/platform"

export default function Header() {
	const platform = usePlatform()
	const { data } = useSuspenseQuery(platform.layout.menusQueryOptions())

	return (
		<header>
			<nav>
				{data.primary.map((item) => (
					<a key={item.id} href={item.uri}>
						{item.label}
					</a>
				))}
			</nav>
		</header>
	)
}