import React, { useState } from 'react'

interface TextValueFIllProps {
    value: string | number;
    multiLine: boolean;
    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
}

const TextValueFIll: React.FC<TextValueFIllProps> = ({ value = "", multiLine, handlePropertyChange }) => {
    const [textValue, setTextValue] = useState<string | number>(value);

    return (
        <div className="flex flex-col">
            <label htmlFor="textValue">Value</label>
            {multiLine ?
                <textarea
                    onBlur={() => handlePropertyChange("value", textValue)}
                    id="textValue"
                    value={textValue}
                    className="outline-none border-1 rounded px-2 py-1 border-slate-200"
                    onChange={e => setTextValue(e.target.value)}
                ></textarea>
                : <input
                    onBlur={() => handlePropertyChange("value", textValue)}
                    id="textValue"
                    value={textValue}
                    className="outline-none border-1 rounded px-2 py-1 border-slate-200"
                    onChange={e => setTextValue(e.target.value)}
                />
            }
        </div>
    )
}

export default TextValueFIll