import { InputField } from '@/components/ui/inputfield';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';

const gradients = [
    'linear-gradient(89.91deg, #8784C9 0%, #464199 99.92%)',
    'linear-gradient(284.32deg, #FFAFBD 20.33%, #DAE2F8 79.67%)',
    'linear-gradient(267.9deg, #473B7B 0%, #30D2BE 100%)',
    'linear-gradient(88.87deg, #C33764 0%, #1D2671 100%)',
    'linear-gradient(267.9deg, #134E5E 0%, #71B280 100%)',
    'linear-gradient(87.9deg, #423AA2 0%, #100626 100%)',
    'linear-gradient(87.9deg, #EDF3F6 0%, #D9EAF4 100%)',
    'linear-gradient(284.32deg, #212121 20.33%, #454545 79.67%)',
    'linear-gradient(88.87deg, #610000 0%, #190A05 100%)',
    'linear-gradient(87.9deg, #FFC500 0%, #C21500 100%)',
    'linear-gradient(270deg, #6A11CB 0%, #69A1FF 100%)',
    'linear-gradient(267.9deg, #182848 0%, #4B6CB7 100%)',
];

export default function ProfilePage() {
    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 flex-end p-[20px]  w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
                    <Input placeholder="Введите описание о себе" />
                    <p className="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet">
                        250
                    </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]">
                    {gradients.map((gradient, index) => (
                        <div
                            key={index}
                            style={{ background: gradient }}
                            className="w-[40px] h-[40px] rounded-full cursor-pointer"
                        />
                    ))}
                </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>
    );
}