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,
                       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}>
                <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;