"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 EmailFieldProps<
  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;
  autoComplete?: string;
}

export function EmailField<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  form,
  name,
  label,
  placeholder = "E-Mail-Adresse eingeben",
  description,
  required = false,
  disabled = false,
  className,
  autoComplete = "email",
}: EmailFieldProps<TFieldValues, TName>) {
  return (
    <FormFieldWrapper
      form={form}
      name={name}
      label={label}
      description={description}
      required={required}
      className={className}
    >
      {(field) => (
        <Input
          type="email"
          placeholder={placeholder}
          disabled={disabled}
          autoComplete={autoComplete}
          {...field}
        />
      )}
    </FormFieldWrapper>
  );
}