import { JSX } from 'preact/jsx-runtime'
import { IconLink } from '../components/IconLink.tsx'
import { Icons } from '../components/icons.tsx'
import { IS_BROWSER } from '$fresh/runtime.ts'

interface NavItem {
	text: string
	href: string
	icon?: keyof typeof Icons
}

const navItems: NavItem[] = [
	{
		text: 'Budgets',
		href: '/bank/budgets',
		icon: 'SomeIcon',
	},
	{
		text: 'Transactions',
		href: '/bank/transactions',
	},
	{
		text: 'Something',
		href: '/bank/something',
	},
]

export function Nav(_props: JSX.HTMLAttributes<HTMLElement>) {
	// TODO: on nav, the `active` field is not updated
	globalThis.addEventListener('popstate', (ev) => {
		console.log('popstate', ev)
	})
	return (
		<nav class='w-full flex flex-1 sm:flex-col sm:bg-bg gap-2 p-2'>
			{navItems.map(({ text, ...props }, _i) => (
				<IconLink
					{...props}
					icon={props.icon}
					active={IS_BROWSER &&
						globalThis.location.toString().endsWith(props.href)}
				>
					{text}
				</IconLink>
			))}
		</nav>
	)
}