import { JSX } from 'preact'

export function Select(
	{ children, className, ...props }: JSX.HTMLAttributes<HTMLSelectElement>,
) {
	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 (
		<select
			{...props}
			class={`${defaultClassName} ${className}`}
		>
			{children}
		</select>
	)
}
