import { InputField } from '@/components/ui/inputfield';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';
export default function SecurityPage() {
    return (
        <>
            <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[816px]">
                <div className="flex flex-col gap-[20px] w-[900px] ">
                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[241px]">
                        <p className="text-light-violet font-medium">
                            ЗАДАТЬ ПАРОЛЬ
                        </p>
                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
                            <InputField
                                placeholder="Почта аккаунта"
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Введите пароль"
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Повторите пароль"
                                type="password"
                                name="password"
                            />
                        </div>
                        <Button>Сменить</Button>
                    </div>
                    <Separator className="bg-violet/30 h-[1px]" />
                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[192px]">
                        <p className="text-light-violet font-medium">
                            СМЕНА ПОЧТЫ
                        </p>
                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
                            <InputField
                                placeholder="Почта аккаунта"
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Введите пароль"
                                type="password"
                                name="password"
                            />
                        </div>
                        <Button>Сменить</Button>
                    </div>
                    <Separator className="bg-violet/30 h-[1px]" />
                    <div className="flex flex-col flex-start gap-[20px] w-[310px] ">
                        <p className="text-light-violet font-medium">
                            СМЕНА ПАРОЛЯ
                        </p>
                        <div className="flex flex-col flex-start gap-[10px] w-[310px]">
                            <InputField
                                placeholder="Текущий пароль"
                                isPassword
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Введите пароль"
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Повторите пароль"
                                type="password"
                                name="password"
                            />
                        </div>
                        <Button>Сменить</Button>
                    </div>
                    <Separator className="bg-violet/30 h-[1px]" />

                    <Button className="w-[310px]">Выйти из аккаунта</Button>
                </div>
            </div>
        </>
    );
}