import { JSX } from 'preact/jsx-runtime'
import { Icons } from './icons.tsx'

interface IconLinkProps {
	active?: boolean
	text?: string
	icon?: keyof (typeof Icons)
}

export function IconLink(
	{ icon, children, active, ...props }:
		& IconLinkProps
		& JSX.HTMLAttributes<HTMLAnchorElement>,
) {
	const Icon = typeof icon === 'string'
		? Icons[icon as keyof typeof Icons]
		: (() => <></>)
	return (
		<a
			class={'p-2 sm:px-4 flex flex-col sm:flex-row flex-1 sm:flex-none bg-mantle justify-center items-center sm:justify-start text-center sm:text-left rounded hover:bg-crust transition-colors' +
				(active ? ' text-primary' : '')}
			{...props}
		>
			{icon !== undefined
				? (
					<span class='sm:mr-2 block'>
						<Icon />
					</span>
				)
				: ''}
			<div class=''>{children}</div>
		</a>
	)
}