---
import {
	ArrowTopRightOnSquareIcon,
	CodeBracketIcon,
	DocumentTextIcon,
} from "@heroicons/react/20/solid"
import { Bars3Icon } from "@heroicons/react/24/outline"
import { getCollection } from "astro:content"
import AppLogo from "./app-logo.astro"
import ExternalLink from "./external-link.astro"
import MenuItem from "./menu-item.astro"
import Menu from "./menu.astro"

const links = [
	{
		href: "/guides/getting-started",
		label: "Guides",
		icon: DocumentTextIcon,
		component: "a",
		prefetch: true,
	},
	{
		href: "/api/",
		label: "API Reference",
		icon: CodeBracketIcon,
		component: "a",
	},
	{
		href: "https://github.com/itsMapleLeaf/reacord",
		label: "GitHub",
		icon: ArrowTopRightOnSquareIcon,
		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
		component: ExternalLink,
	},
]

const guides = await getCollection("guides")
---

<nav class="flex h-16 items-center justify-between">
	<a href="/">
		<AppLogo class="w-32" />
		<span class="sr-only">Home</span>
	</a>
	<div class="hidden gap-4 md:flex">
		{
			links.map((link) => (
				<link.component
					href={link.href}
					class="link inline-flex items-center gap-1"
					rel={link.prefetch ? "prefetch" : undefined}
				>
					<link.icon className="inline-icon" />
					{link.label}
				</link.component>
			))
		}
	</div>

	<Menu>
		<Fragment slot="button">
			<Bars3Icon className="w-6" />
			<span class="sr-only">Menu</span>
		</Fragment>
		{
			links.map((link) => (
				<link.component href={link.href}>
					<MenuItem icon={link.icon} label={link.label} />
				</link.component>
			))
		}
		<hr class="border-black/25" />
		{
			guides.map((guide) => (
				<a href={`/guides/${guide.slug}`} rel="prefetch">
					<MenuItem icon={DocumentTextIcon} label={guide.data.title} />
				</a>
			))
		}
	</Menu>
</nav>