import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
import { JSX } from 'preact'

// interface Budget {
// 	name: string
// 	target: number
// 	buffer?: number
// }

interface IconButtonProps {
	active?: boolean
	text: string
	icon: string
}
function IconButton(
	{ icon, text, active, ...props }:
		& IconButtonProps
		& JSX.HTMLAttributes<HTMLButtonElement>,
) {
	return (
		<button
			class={'p-2 flex flex-col sm:flex-row flex-1 sm:flex-none bg-bg justify-center items-center sm:justify-start text-center sm:text-left rounded' +
				(active ? ' text-primary' : '')}
			{...props}
		>
			<i>{icon}</i>
			<span>{text}</span>
		</button>
	)
}

export default function Dashboard() {
	const activeNavItemIndex = useSignal(0)
	const navItems = [
		{ text: 'Some Text', icon: 'ICON' },
		{ text: 'Some Text', icon: 'ICON' },
		{ text: 'Some Text', icon: 'ICON' },
	]

	return (
		<div class='grid grid-rows-[1fr_auto] sm:grid-cols-2 sm:grid-rows-1 sm:grid-cols-[1fr_auto] h-[100vh]'>
			<main class='p-2'>
				This is the main content
			</main>

			<nav class='w-full flex flex-1 sm:flex-col bg-mantle gap-1 p-1'>
				{navItems.map((props, i) => (
					<IconButton
						{...props}
						active={i == activeNavItemIndex.value}
						onClick={(ev) => {
							console.log({ ev, i })
							activeNavItemIndex.value = i
						}}
					/>
				))}
			</nav>
		</div>
	)
}