import { Input, View } from "@tarojs/components";
import './Inputs.scss'
import { useState } from "react";

interface CustomInputProps {
    placeholder?: string;
    value: string;
    onChange: (value: string) => void;
    disabled?: boolean;
    isSecure?: boolean;
}

export default function Component({
    placeholder,
    value,
    onChange,
    disabled,
    isSecure
}: CustomInputProps) {
    const [inputValue, setInputValue] = useState(value ? value : '');
    const [isFocus, setIsFocus] = useState(false)
    const handleInputChange = (e: any) => {
        const newValue = e.target.value;
        setInputValue(newValue);
        onChange(newValue);
    };
    return (
        <View>
            <Input className={isFocus ? "input input_focus" : "input"}
                placeholder={placeholder ? placeholder : ''}
                value={inputValue}
                type={isSecure ? 'password' : 'text'}
                onInput={handleInputChange}
                disabled={disabled?disabled:false}
                onFocus={() => {
                    setIsFocus(true)
                }}
                onBlur={() => {
                    setIsFocus(false)
                }}
            />
        </View>
    )
}