//import { ShuffleIcon } from 'lucide-react';
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">
            <div className="flex min-w-[267] max-w-[750] grow items-center gap-7.5">
                <Link href="/" className="shrink-0 ">
                    <Image
                        src="/icons/logo.svg"
                        alt="ARTBERRY"
                        width={46}
                        height={50}
                        className="h-[50]"
                    />
                </Link>
                <div className="flex gap-3.75 grow items-center">
                    <Search />
                    <Button variant={'icon'} size={'icon'} asChild>
                        <ShuffleIcon width={20} height={19} strokeWidth={2} />
                    </Button>
                    <div className="gap-[20] flex items-center shrink-0 w-[185]">
                        <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]">
                            <span>AI</span>
                            <Switch />
                        </div>
                        <div className="flex h-[22] gap-2.5 opacity-100 items-center w-[66]">
                            <span>NSFW</span>
                            <Switch />
                        </div>
                    </div>
                </div>
            </div>

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

function Search() {
    return (
        <div className="flex w-[409] h-[50] border-2 items-center rounded-4xl p-3.75">
            <div className="flex w-full gap-1.25">
                <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-[450] justify-between px-7.5 font-medium"></div>
    );
}