import styles from "./Input.module.css";
import { useState, ChangeEvent, InputHTMLAttributes } from "react";

interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
    placeholder?: string;
    value?: string;
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    borderStyle?: "square" | "rounded";
    password?: boolean;
    className?: string;
}

const TextInput = ({
    placeholder = "",
    onChange,
    value = "",
    borderStyle = "square",
    password = false,
    className = "",
    ...props
}: TextInputProps) => {
    const [showPassword, setShowPassword] = useState<boolean>(false);

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

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

    if (password) {
        return (
            <div className={styles.passwordContainer}>
                <input
                    type={showPassword ? "text" : "password"}
                    value={value}
                    placeholder={placeholder}
                    onChange={onChange}
                    className={`${styles.input} ${styles.passwordInput} ${inputBorderStyle} ${className}`}
                    {...props}
                />
                <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;