import React from "react";
import {
	FieldValues,
	Path,
	RegisterOptions,
	UseFormReturn,
} from "react-hook-form";
import { cn } from "../helper/cn";

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>
	);
};
