import React from "react"
import { Link as AnchorLink } from "react-scroll";
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
import { BsWhatsapp } from "@react-icons/all-files/bs/BsWhatsapp";
import { BsTelegram } from "@react-icons/all-files/bs/BsTelegram";

const Footer = ({menu}) => {

    return(
        <footer itemScope itemType="https://schema.org/WPFooter" className="bg-[#0E0808] flex flex-col w-full">
            <div className="bg-black h-12 w-full"></div>
            <div className="container mx-auto flex flex-col py-16 max-md:px-3">
                <div className="flex max-md:flex-col items-center justify-between border-b-[1px] border-white pb-10">
                    <AnchorLink smooth={true} className="cursor-pointer max-md:mb-5" to="hero"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-20"/></AnchorLink>
                    {menu === 'default'
                    ?
                    <ul className='flex max-md:flex-col items-center'>
                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Услуги</AnchorLink></li>
                        <li className="mr-12 max-md:mr-0 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
                        <li className="text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                    </ul>
                    :
                    <ul className='flex max-md:flex-col items-center last:[&>li]:mr-0'>
                        <li className="mr-12 max-md:mr-0 max-lg:mr-5 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><Link to="/">Главная</Link></li>
                        {menu.map(item=>
                            <li key={item.id} className="mr-12 max-md:mr-0 max-lg:mr-5 max-md:leading-7 text-white hover:text-gray-400 transition-colors text-sm"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                        )}
                    </ul>
                    }
                </div>
                <div className="flex mt-8 justify-between max-sm:flex-col max-sm:items-center">
                    <meta itemProp="copyrightYear" content={new Date().getFullYear()}/>
                    <meta itemProp="copyrightHolder" content="TalentTeam"/>
                    <p className="text-white text-sm max-sm:order-2">© {new Date().getFullYear()} TalentTeam</p>
                    <div className="flex max-sm:order-1 max-sm:mb-5" itemScope itemType="https://schema.org/Organization">
                        <meta itemProp="name" content="Talent Team"/>
                        <div className="hidden" itemProp="address" itemScope itemType="http://schema.org/PostalAddress">
                            <meta itemProp="streetAddress" content="Льва Толстого, 16"/>
                            <meta itemProp="addressLocality" content="Москва"/>
                        </div>
                        <div className="flex items-center">
                            <a href="https://wa.me/+79200745505" target="_blank" rel="noreferrer" aria-label="WhatsApp"><BsWhatsapp className="text-white text-lg mr-2"/></a>
                            <a href="https://t.me/+79200745505" target="_blank" rel="noreferrer" aria-label="Telegram"><BsTelegram className="text-white text-lg mr-2"/></a>
                        </div>
                        <a href="tel:+79200745505" className="text-white hover:text-gray-400 transition-colors" itemProp="telephone">8 (920) 074 55-05</a>
                    </div>
                </div>
            </div>
        </footer>
    )
}

export default Footer
