"use client";

import { useLanguage } from "@/app/context/LanguageContext";

interface InputFieldProps {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
  register: any;
  error?: any;
  rules?: any;
  required?: boolean;
  maxLength?: number;
  inputMode?:
    | "text"
    | "numeric"
    | "decimal"
    | "tel"
    | "email"
    | "url"
    | "search"
    | "none";
}

export default function InputField({
  label,
  name,
  type = "text",
  placeholder,
  register,
  error,
  rules,
  required = true,
  maxLength,
  inputMode,
}: InputFieldProps) {
  const { t } = useLanguage();
  return (
    <div className="mb-3">

      <label className="form-label fw-semibold">
        {label}
      </label>

      <input
        type={type}
        placeholder={placeholder || label}
        maxLength={maxLength}
        inputMode={inputMode}
        className={`form-control form-control-lg ${
          error ? "is-invalid" : ""
        }`}
        {...register(name, {
          required: required
            ? `${label} ${t("auth.inputField.isRequired", "is required")}`
            : false,
          ...rules,
        })}
      />

      {error && (
        <div className="invalid-feedback">
          {error.message}
        </div>
      )}

    </div>
  );
}