import React from 'react'
import { Link } from 'gatsby'; 

import Logo from "../images/logo.svg";
import { BiSearchAlt } from "@react-icons/all-files/bi/BiSearchAlt";
import { BiPhoneCall } from "@react-icons/all-files/bi/BiPhoneCall";
import { BsFillSunFill } from "@react-icons/all-files/bs/BsFillSunFill";

const Header = () => {
    return (
        <header className='bg-[#F7F7FF]'>
            <nav className="container mx-auto items-center flex justify-between relative py-3 h-24">
                <Link to='/'><Logo className="w-32"/></Link>
                <ul className='flex items-center'>
                    <li className='mr-14 font-bold text-lg text-black'><Link to='/about'>О нас</Link></li>
                    <li className='mr-14 font-bold text-lg text-black'><Link to='/services'>Услуги</Link></li>
                    <li className='mr-14 font-bold text-lg text-black'><Link to='/price'>Цены</Link></li>
                    <li className='font-bold text-lg text-black'><Link to='/contacts'>Контакты</Link></li>
                </ul>
                <div className="flex items-center">
                    <ul className='flex items-center'>
                        <li className='mr-4 text-2xl'><BiSearchAlt/></li>
                        <li className='mr-4 text-2xl'><BiPhoneCall/></li>
                        <li className='mr-8 text-2xl'><BsFillSunFill/></li>
                    </ul>
                    <a className='text-xl font-bold' href="tel:+79999999999">+7 (999) 999 99-99</a>
                </div>
            </nav>
        </header>
    )
}

export default Header;