import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

export type Props = HTMLAttributes<"input"> & {
	"pre"?: JSX.Element;
	"post"?: JSX.Element;
	"invalid"?: boolean;
	"pill"?: boolean;
	"x-model"?: string;
};

export const TextField = ({
	pre,
	post,
	disabled,
	invalid,
	pill,
	placeholder,
	readonly,
	value,
	pattern,
	required,
	"x-model": xModel,
	class: cls,
	...props
}: Props) => {
	const extended = !!pre || !!post;

	return (
		<div
			class:list={[
				"o-text-field",
				{
					"is-disabled": disabled,
					"is-invalid": invalid,
					"l-media": extended,
					"l-media--gapless": extended,
					"o-text-field--extended": extended,
					"o-text-field--pill": pill,
				},
				cls,
			]}
			{...props}
		>
			{pre}{" "}
			<input
				class="o-text-field__native"
				class:list={{
					"l-media__block": extended,
					"l-media__block--main": extended,
				}}
				disabled={disabled}
				pattern={pattern}
				placeholder={placeholder}
				readonly={readonly}
				required={required}
				value={value}
				x-model={xModel}
			/>{" "}
			{post} <div class="o-text-field__bg"></div>
		</div>
	);
};