import { JSX } from 'preact'

export function Input(
	{ className, ...props }: JSX.HTMLAttributes<HTMLInputElement>,
) {
	if (!props.id && props.name) {
		props.id = props.name
	} else if (!props.name && props.id) {
		props.name = props.id
	}
	let defaultClassName =
		'border-2 bg-stone-500/20 border-stone-500/20 px-2 py-1 rounded'
	if (props.type == 'submit') {
		defaultClassName =
			'px-2 py-1 bg-emerald-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors'
	}

	return (
		<input
			{...props}
			class={`${defaultClassName} ${className}`}
		/>
	)
}