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="form-control w-full">
      <div className="label">
        <span className="label-text text-lg flex items-center gap-2">
          {label}
        </span>
      </div>
      <input
        {...form.register(name, formOptions)}
        type="text"
        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>
  );
};