import { InputField } from '@/components/ui/inputfield';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';
import { useState } from 'react';
export default function ProfilePage() {
    const maxLength = 250;
    const [about, setAbout] = useState('');
    return (
        <div className="flex flex-col flex-start gap-[20px] w-[900px] h-[804px]">
            <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[123px]">
                <p className="font-medium gap-[10px] ml-[20px]">НИКНЕЙМ</p>
                <InputField placeholder="Введите никнейм" />
                <Button className="w-[105px]">Сменить</Button>
            </div>
            <Separator className="bg-violet/50 h-[1px]" />
            <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 p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
                    <textarea
                        value={about}
                        onChange={(e) => setAbout(e.target.value)}
                        maxLength={maxLength}
                        placeholder="Введите описание о себе"
                        className="w-full h-full resize-none outline-none bg-transparent"
                    />

                    <p
                        className={`ml-[10px] flex items-end ${
                            maxLength - about.length <= 10
                                ? 'text-red'
                                : 'text-light-violet'
                        }`}
                    >
                        {maxLength - about.length}
                    </p>
                </div>

                <Button className="w-[105px]">Сменить</Button>
            </div>{' '}
            <Separator className="bg-violet/50 h-[1px]" />
            <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
                <p className="font-medium text-light-violet ml-[20px]">
                    АВАТАР
                </p>
                <div className="flex flex-row gap-[10px]">
                    <Button className="w-[105px]">Сменить</Button>
                    <Button variant={'danger'}>Удалить</Button>
                </div>
            </div>
            <Separator className="bg-violet/50 h-[1px]" />
            <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[169px]">
                <p className="font-medium text-light-violet ml-[20px]">
                    ТЕМА БАННЕРА
                </p>

                <div className="flex flex-row flex-wrap items-center content-start gap-[5px] w-[265px] h-[85px]">
                    {Array.from({ length: 12 }).map((_, index) => (
                        <div
                            key={index}
                            className={`w-[40px] h-[40px] rounded-full cursor-pointer gradient-${index}`}
                        />
                    ))}
                </div>
                <div className="flex flex-row gap-[10px]">
                    <Button className="w-[105px]">Сменить</Button>
                    <Button variant={'danger'}>Удалить</Button>
                </div>
            </div>
            <Separator className="bg-violet/50 h-[1px]" />
            <div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
                <p className="font-medium text-light-violet ml-[20px]">
                    БАННЕР
                </p>
                <div className="flex flex-row gap-[10px]">
                    <Button className="w-[105px]">Сменить</Button>
                    <Button variant={'danger'}>Удалить</Button>
                </div>
            </div>
        </div>
    );
}