import React from "react";
import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
import { cn } from "@repo/shared-components";

interface InputProps<T extends FieldValues>
	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {
	name: Path<T>;
	form: UseFormReturn<T>;
	formOptions?: RegisterOptions<T>;
	label?: string;
	placeholder?: string;
}

export const Input = <T extends FieldValues>({
	name,
	label = name,
	placeholder = label,
	form,
	formOptions,
	className,
	...inputProps
}: InputProps<T>) => {
	return (
		<label className="floating-label w-full mt-5">
			<span className="text-lg flex items-center gap-2">{label}</span>
			<input
				{...form.register(name, formOptions)}
				className={cn("input input-bordered w-full placeholder:text-neutral-600", className)}
				placeholder={placeholder}
				{...inputProps}
			/>
			{form.formState.errors[name] && (
				<p className="text-error">{form.formState.errors[name].message as string}</p>
			)}
		</label>
	);
};