import "./InputField.css";
import type { Component, JSX } from "solid-js";

export const InputField: Component<{
	name: string;
	value: string;
	type?: string;
	icon?: JSX.Element;
	children?: JSX.Element;
	onChange?: (value: string) => void;
	onInput?: (value: string) => void;
}> = (props) => (
	<label class="input-field" classList={{ icon: !!props.icon }}>
		{props.children}
		{props.icon}
		<input
			type={props.type ?? "text"}
			name={props.name}
			value={props.value}
			onChange={(e) => props.onChange?.(e.target.value)}
			onInput={(e) => props.onInput?.(e.target.value)}
		/>
	</label>
);