"use client";

import React from "react";
import { Input } from "@/components/ui/input";
import { FormFieldWrapper } from "./FormFieldWrapper";
import { UseFormReturn, FieldPath, FieldValues } from "react-hook-form";

export interface TextFieldProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> {
  form: UseFormReturn<TFieldValues>;
  name: TName;
  label?: string;
  placeholder?: string;
  description?: string;
  required?: boolean;
  disabled?: boolean;
  className?: string;
  type?: "text" | "password" | "tel" | "url" | "search";
  autoComplete?: string;
}

export function TextField<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  form,
  name,
  label,
  placeholder,
  description,
  required = false,
  disabled = false,
  className,
  type = "text",
  autoComplete,
}: TextFieldProps<TFieldValues, TName>) {
  return (
    <FormFieldWrapper
      form={form}
      name={name}
      label={label}
      description={description}
      required={required}
      className={className}
    >
      {(field) => (
        <Input
          type={type}
          placeholder={placeholder}
          disabled={disabled}
          autoComplete={autoComplete}
          {...field}
        />
      )}
    </FormFieldWrapper>
  );
}