examjam-frontend/components/FormField.tsx

import React, { useState, useId, InputHTMLAttributes } from "react";

interface FormFieldProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
  title: string;
  value: string | number;
  placeholder?: string;
  handleChangeText: (value: string) => void;
}

const FormField: React.FC<FormFieldProps> = ({
  title,
  value,
  placeholder,
  handleChangeText,
  type,
  ...props
}) => {
  const [showPassword, setShowPassword] = useState(false);
  const inputId = useId();

  const isPasswordField =
    type === "password" || title.toLowerCase().includes("password");

  const inputType = isPasswordField
    ? showPassword
      ? "text"
      : "password"
    : type || "text";

  return (
    <div className="w-full">
      <label
        htmlFor={inputId}
        className="block mb-2 text-[#666666] text-[18px] font-medium font-montserrat tracking-[-0.5px]"
      >
        {title}
      </label>

      <div className="h-16 px-4 bg-[#D2DFF0] rounded-3xl flex items-center justify-between">
        <input
          id={inputId}
          type={inputType}
          value={value}
          placeholder={placeholder || `Enter ${title.toLowerCase()}`}
          autoComplete={isPasswordField ? "current-password" : "on"}
          onChange={(e) => handleChangeText(e.target.value)}
          className="flex-1 bg-transparent outline-none border-none text-blue-950 text-[16px] font-inherit"
          {...props}
        />

        {isPasswordField && (
          <button
            type="button"
            onClick={() => setShowPassword((prev) => !prev)}
            aria-pressed={showPassword}
            aria-label={showPassword ? "Hide password" : "Show password"}
            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none font-montserrat font-medium text-[16px]"
          >
            {showPassword ? "Hide" : "Show"}
          </button>
        )}
      </div>
    </div>
  );
};

export default FormField;