import { JSX } from 'preact/jsx-runtime'

interface IconButtonProps {
	active?: boolean
	text?: string
	icon?: JSX.Element
}

export function IconButton(
	{ icon, children, active, ...props }:
		& IconButtonProps
		& JSX.HTMLAttributes<HTMLButtonElement>,
) {
	return (
		<button
			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' +
				(active ? ' text-primary' : '')}
			{...props}
		>
			<div class='sm:mr-2'>{icon}</div>
			<div class=''>{children}</div>
		</button>
	)
}