import English from '@icons/english.svg';
import Link from 'next/link';
import Discord from '@icons/discord.svg';
import Premium from '@icons/footer/premium.svg';
import Faq from '@icons/footer/faq.svg';
import Logo from '@icons/logo.svg';
import DiscordFooter from '@icons/footer/discord.svg';
import Download from '@icons/footer/download.svg';
import ArtberryIcon from '@icons/artberry.svg';

export function Footer() {
    return (
        <div className="w-full bg-dark-indigo">
            <footer className="mx-auto w-full xl:max-w-[1200px] 2xl:max-w-[1500px] flex justify-between py-[50px]">
                <div className="flex flex-col justify-between w-[259px] h-[192px]">
                    <div className="text-right">
                        <div className="flex items-center gap-2.5 w-full">
                            <Logo />
                            <ArtberryIcon />
                        </div>
                        <span className="font-medium">Лучшее — здесь.</span>
                    </div>
                    <div className="flex flex-col gap-1.25">
                        <span className="underline text-sm">
                            Terms and Conditions · Privacy Policy
                        </span>
                        <span className="text-xs">
                            © {new Date().getFullYear()} artberry.xyz
                        </span>
                    </div>
                </div>
                <div className="flex justify-between gap-48.75">
                    <div className="flex-row flex gap-25 h-32.5 w-88.5">
                        <div className=" leading-5.5 h-29.5 flex flex-col gap-2.5 w-41.25">
                            <Link
                                href="/upload"
                                className="flex gap-1.25 flex-row items-center"
                            >
                                <Download className="w-4.75 h-4.75" />
                                <span className="">Загрузить контент</span>
                            </Link>
                            <Link className="flex gap-1.25" href="/faq">
                                <Faq />
                                <span>FAQ</span>
                            </Link>
                            <Link
                                className="flex gap-1.25 flex-row items-center"
                                href="/premium"
                            >
                                <Premium />
                                <span>Премиум</span>
                            </Link>
                            <Link
                                className="flex gap-1.25 flex-row items-center"
                                target="_blank"
                                href="https://discord.gg/pJ66ZFpQQK"
                            >
                                <DiscordFooter />

                                <span>Сообщество</span>
                            </Link>
                        </div>
                        <div className=" flex flex-col leading-5.5 gap-1.25">
                            <span>Теги</span>
                            <span>Персонажи</span>
                            <span>Категории</span>
                            <span>Коллекции</span>
                            <span>Рандом</span>
                        </div>
                    </div>
                    <div className="w-42.5 h-4.75 bg-violet gap-1.25 flex flex-row items-center items-center justify-center w-37.5 h-10.5 px-7.5 py-2.5 rounded-[20px]">
                        <span>English</span>
                        <English />
                    </div>
                </div>
            </footer>
        </div>
    );
}