import type { TextInputProps } from "$/types/Input";
import clsx from "clsx";


export default function TextInput(props: TextInputProps){
	const {
		id,
		className,
		inputClassName,
		labelClassName,
		placeholder,
		defaultValue,
		value,
		onChange,
		disabled
	} = props;


	return (
		<div
			className={clsx(
				"flex flex-row items-center justify-center rounded-lg border-2",
				className
			)}
		>
			<div
				className="relative flex flex-row items-center justify-center px-2 py-1"
			>
				<input
					type="text"
					id={id}
					className={clsx(
						"peer bg-transparent outline-none placeholder-transparent",
						inputClassName
					)}
					placeholder={placeholder}
					defaultValue={defaultValue}
					value={value}
					onChange={onChange}
					disabled={disabled}
				/>
				<label
					className={clsx(
						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text",
						"flex items-center",
						labelClassName
					)}
					style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
					htmlFor={id}
				>
					{placeholder}
				</label>
			</div>
		</div>
	);
}