import ShuffleIcon from '@icons/ShuffleIcon.svg';
import Image from 'next/image';
import { Button, Input } from '../ui';
import { ProfileOrLogin } from './ProfileOrLogin';
import Link from 'next/link';
import DiscordIcon from '@icons/discord.svg';
import { Switch } from '@/components/ui/switch';
export function NavBar() {
    return (
        <div className="flex w-full justify-between py-7.5 h-[110] items-center xl:max-2xl:max-w-[1200px] 2xl:max-w-[1500px]">
            <div className="flex grow items-center gap-[30px] max-w-[750px]">
                <Link href="/" className="shrink-0 ">
                    <Image
                        src="/icons/logo.svg"
                        alt="ARTBERRY"
                        width={46}
                        height={50}
                        className="h-[50]"
                    />
                </Link>
                <div className="flex gap-[15px] grow min-w-[674px] items-center">
                    <Search />
                    <Button
                        variant={'icon'}
                        size={'icon'}
                        className="w-[50px] h-[50px] p-[15px]"
                        asChild
                    >
                        <ShuffleIcon width={20} height={19} strokeWidth={2} />
                    </Button>
                    <div className="gap-[20px] flex items-center shrink-0">
                        <div className="flex h-[22px] w-[66px] gap-2.5 opacity-100 items-center">
                            <span className="font-[500] h-[22] text-[16px]">
                                AI
                            </span>
                            <Switch />
                        </div>
                        <div className="flex h-[22px] gap-[10px] w-[99px] opacity-100 items-center">
                            <span className="font-[500] h-[22px] text-[16px]">
                                NSFW
                            </span>
                            <Switch />
                        </div>
                    </div>
                </div>
            </div>

            <div className="flex gap-5 items-center shrink-0">
                <Link href={'#'} className="hover:[&_path]:fill-light-violet">
                    <DiscordIcon />
                </Link>
                <ProfileOrLogin />
            </div>
        </div>
    );
}

function Search() {
    return (
        <div className="flex w-[409px] h-[50px] border-2 rounded-4xl p-[15px]">
            <div className="flex w-[379px] gap-[5px] items-center">
                <Image
                    src="/icons/search.svg"
                    alt=""
                    width={24}
                    height={24}
                    className="h-[24] w-[24]"
                />
                <Input
                    placeholder="Поиск"
                    className="text-light-violet placeholder:text-light-violet text-sm"
                />
            </div>
        </div>
    );
}

function Sections() {
    return (
        <div className="flex grow min-w-75 max-w-[1] justify-between px-7.5 font-medium"></div>
    );
}