import { FC, useRef, FormEvent } from 'react'

interface TextareaProps {
    msg: string;
    setMsg: (msg: string) => void,
}

const Textarea: FC<TextareaProps> = ({msg, setMsg}) => {
    const ref = useRef<HTMLTextAreaElement>(null);
    
    const textAreaHandler = (e: FormEvent) => {
        const target = e.target as HTMLInputElement;
        setMsg(target.value);
        if(ref.current) {
            ref.current.style.height = "25px";
            ref.current.style.height = ref.current.scrollHeight.toString()+"px";
        }   
    }

    return (
        <textarea ref={ref} value={msg} placeholder='Введите сообщение...' onInput={e=> textAreaHandler(e)} className='px-5 w-full text-sm resize-none custom-scroll focus:outline-none bg-transparent text-white h-[25px] max-h-[80px]'></textarea>
    )
}

export default Textarea;