import { VNode } from 'https://esm.sh/v128/preact@10.19.6/src/index.js'
import { JSX } from 'preact'

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

interface IconButtonProps {
	text: string
	icon: string
}

function IconButton(
	{ icon, text, ...props }:
		& IconButtonProps
		& JSX.HTMLAttributes<HTMLAnchorElement>,
) {
	return (
		<a
			href='#'
			class='p-2 flex flex-col flex-1 bg-bg justify-center items-center text-center'
			{...props}
		>
			<i>{icon}</i>
			<span>{text}</span>
		</a>
	)
}

export default function Home() {
	return (
		<div class='flex flex-col sm:flex-row min-h-full'>
			<main class='p-2'>
				This is the main content
			</main>

			<nav class='w-full mt-auto sm:ml-auto flex flex-1 bg-mantle gap-1 p-1'>
				<IconButton text='Some Text' icon='Some Icon' />
				<IconButton text='Some Text' icon='Some Icon' />
				<IconButton text='Some Text' icon='Some Icon' />
			</nav>
		</div>
	)
}