import { useState } from 'react';
import { ChangeEvent } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
export default function AboutMe() {
    const maxLength = 250;
    const [text, setText] = useState('');

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;

        if (value.length <= maxLength) {
            setText(value);
        }
    };

    return (
        <div className="flex flex-col flex-start gap-[10px] w-[600px] h-[284px]">
            <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
                ОБО МНЕ
            </p>

            <div className="flex flex-row flex-end p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
                <Input
                    value={text}
                    onChange={handleChange}
                    placeholder="Введите описание о себе"
                />

                <p className="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet">
                    {maxLength - text.length}
                </p>
            </div>

            <Button className="w-[105px]">Сменить</Button>
        </div>
    );
}