import { Button } from '@/components/ui/button';
import { DialogContent } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GoogleIcon from '../../../public/icons/google.svg';
export function AuthDialog() {
    return (
        <div className="absolute">
            <DialogContent className="w-[350px] p-0 bg-transparent border-transparent">
                <Tabs defaultValue="Login">
                    <div className="flex flex-col gap-[5px] ">
                        <TabsList className="w-[350px] h-[36px] font-medium justify-between bg-background border border-violet rounded-[15px]">
                            <TabsTrigger
                                value="Login"
                                className="w-[59px] text-[16px] leading-[22px]"
                            >
                                <span className="w-[39px]">Вход</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="Register"
                                className="w-[116px]  text-[16px]"
                            >
                                <span className="w-[96px]">Регистрация</span>
                            </TabsTrigger>
                            <TabsTrigger
                                value="Reset"
                                className="w-[145px] gap-[10px]  text-[16px] "
                            >
                                <span className="w-[125px]">
                                    Восстановление
                                </span>
                            </TabsTrigger>
                        </TabsList>
                        <TabsContent
                            value="Login"
                            className="w-[350px] min-h-[250px] p-4 gap-4 flex flex-col items-center justify-center rounded-[15px] border-[2px] bg-background"
                        >
                            <div className="gap-5 flex flex-col h-[148px] w-[310px]">
                                <Button className="w-full bg-white hover:bg-white hover:text-black">
                                    <GoogleIcon />
                                    <span className="text-black">
                                        Войти через Google
                                    </span>
                                </Button>
                                <div className="gap-[10px] flex-col flex h-[88px]">
                                    <div className="rounded-[20px] border-violet border-[2px] h-[39px] justify-between py-[10px] px-[20px] items-center flex">
                                        <Input
                                            className="w-full flex text-white placeholder:text-light-violet h-[19px]"
                                            placeholder="Никнейм или почта"
                                        />
                                    </div>
                                    <div className="rounded-[20px] border-violet border-[2px] h-[39px] justify-between py-[10px] px-[20px] items-center flex">
                                        <Input
                                            className="w-full flex text-white placeholder:text-light-violet h-[19px]"
                                            placeholder="пароль"
                                        />
                                    </div>
                                </div>
                            </div>
                            <Button className="w-full gap-[10px]">Войти</Button>
                        </TabsContent>
                        <TabsContent value="Register">
                            <div className="h-[99px]"></div>
                        </TabsContent>

                        <TabsContent value="Reset"></TabsContent>
                    </div>
                </Tabs>
            </DialogContent>
        </div>
    );
}