import React, { useState } from "react";

const FormField = ({
  title,
  placeholder,
  value,
  handleChangeText,
  ...props
}) => {
  const [showPassword, setShowPassword] = useState(false);

  const isPasswordField = title === "Password" || title === "Confirm Password";

  return (
    <div className="w-full">
      <label
        className="block mb-2"
        style={{
          color: "#666666",
          fontFamily: "Montserrat, sans-serif",
          fontWeight: "500",
          fontSize: 18,
          marginBottom: 8,
          letterSpacing: "-0.5px",
        }}
      >
        {title}
      </label>

      <div
        className="h-16 px-4 bg-blue-200 rounded-3xl flex items-center justify-between"
        style={{
          height: 64,
          paddingLeft: 16,
          paddingRight: 16,
          backgroundColor: "#D2DFF0",
          borderRadius: 20,
        }}
      >
        <input
          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"
          style={{
            color: "#0D47A1",
            fontSize: 16,
            fontFamily: "inherit",
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
          }}
          {...props}
        />

        {isPasswordField && (
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
            style={{
              fontFamily: "Montserrat, sans-serif",
              fontWeight: "500",
              fontSize: 16,
              background: "none",
              border: "none",
              cursor: "pointer",
              padding: 0,
            }}
          >
            {showPassword ? "Hide" : "Show"}
          </button>
        )}
      </div>
    </div>
  );
};

export default FormField;