import styles from "./input.module.css";
import { useState } from "react";

const TextInput = ({ placeholder, onChange, value, borderStyle, password, className, ...props }) => {

    const [showPassword, setShowPassword] = useState(false);

    let inputBorderStyle = styles.square;
    if (borderStyle === "square") inputBorderStyle = styles.square;
    if(borderStyle === "rounded") inputBorderStyle = styles.rounded;

    const toggleShowPassword = () => {
        setShowPassword(!showPassword);
    };

    if(password) return (
        <div className={styles.passwordContainer}>
            <TextInput
                type={showPassword ? "text" : "password"}
                value={value}
                placeholder={placeholder}
                onChange={onChange}
                className={styles.passwordInput}
            />
            <button
                type="button"
                onClick={toggleShowPassword}
                className={styles.passwordBtn}
            >
                {showPassword ? '👁️' : '🔒'}
            </button>
        </div>
    );

    return <input className={`${styles.input} ${inputBorderStyle} ${className}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
};

export default TextInput;