import React from "react"
import { Link as AnchorLink } from "react-scroll";
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
import { useLocation } from '@reach/router';

const Footer = ({menu}) => {

    const location = useLocation(); 

    return(
        <footer 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">
                <div className="flex items-center justify-between border-b-[1px] border-white pb-10">
                    <AnchorLink smooth={true} className="cursor-pointer" to="hero"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-20"/></AnchorLink>
                    {location.pathname === '/'
                    ?
                    <ul className='flex items-center'>
                        <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
                        <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Услуги</AnchorLink></li>
                        <li className="mr-12 text-white text-sm"><a href="#"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></a></li>
                        <li className="text-white text-sm"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                    </ul>
                    :
                    <ul className='flex items-center last:[&>li]:mr-0'>
                        <li className="mr-12 text-white text-sm"><Link to="/">Главная</Link></li>
                        {menu.map(item=>
                            <li key={item.id} className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                        )}
                    </ul>
                    }
                </div>
                <div className="flex mt-8 justify-between">
                    <p className="text-white text-sm">© {new Date().getFullYear()} TalentTeam</p>
                    <a href="tel:+79200745505" className="text-white">8 (920) 074 55-05</a>
                </div>
            </div>
        </footer>
    )
}

export default Footer
