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

interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  title: string;
  placeholder?: string;
  value: string;
  handleChangeText: (value: string) => void;
}

const FormField = ({
  title,
  placeholder,
  value,
  handleChangeText,
  ...props
}: FormFieldProps) => {
  const [showPassword, setShowPassword] = useState(false);
  const isPasswordField = title.toLowerCase().includes("password");

  const inputId = `input-${title.replace(/\s+/g, "-").toLowerCase()}`;

  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={isPasswordField && !showPassword ? "password" : "text"}
          value={value}
          placeholder={placeholder}
          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-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] bg-none border-none"
          >
            {showPassword ? "Hide" : "Show"}
          </button>
        )}
      </div>
    </div>
  );
};

export default FormField;