import React from 'react';
import { Link } from "react-router-dom";
import styled from 'styled-components';
import SVGIcon from '../UI/Icon/SVGIcon';

// import './styles/Header.css';

const HeaderElement = styled.header`
    min-width: 950px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 8%;
`;

const LogoSection = styled.section`
    display: flex;
    align-items: center;
`;

const VerticalLine = styled.div`
    width: 1px;
    height: 37px;
    margin: 0px 17px;
    background-color: #a9a9a9;
`;

const LocationButton = styled.button`
    width: 150px;
    height: 28px;
    margin-left: 20px;
    border-radius: 40px;
    background-color: #CCC;
    font-size: 15px;
    & ${SVGIcon} {
        margin-left: 0;
    }
`;

const PairentLogo = styled.h1`
    user-select: none;
`;

const NavButton = styled.div`
    & a:hover {
        color: #0050A1;
        transition: 0.3s ease;
    }
`;
const Navbar = styled.nav`
    display: flex;
    align-items: center;
    & ${NavButton} {
        margin-right: 55px
    }
`;

const Header = function () {
    return ( 
        <HeaderElement>
            <LogoSection>
                <a href="https://vvsu.ru">
                    <img width='100' height='32' src="/images/vvsu_logo.png"></img>
                </a>
                <VerticalLine />
                <Link to='/'>
                    <PairentLogo>Pairent</PairentLogo>
                </Link>
                <Link to="/">
                    <LocationButton>
                        <SVGIcon src='/images/icons/pin.svg' width='8' height='14' />
                        Владивосток
                    </LocationButton>
                </Link>
            </LogoSection> 
            <Navbar>
                <NavButton>
                    <Link to="/favorites">
                    <SVGIcon src='/images/icons/heart.svg' width='16' height='14' />
                        Избранное
                    </Link>
                </NavButton>
                <NavButton>
                    <Link to="/comparisons">
                        <SVGIcon src='/images/icons/stats.svg' width='16' height='14' />
                        Сравнения
                    </Link>
                </NavButton>
                <NavButton>
                    <Link to="/">
                        <SVGIcon src='/images/icons/chat-bubble.svg' width='16' height='14' />
                        Чаты
                    </Link>
                </NavButton>
                <Link to="/">
                    <SVGIcon src='/images/icons/user.svg' width='32' height='32' />
                </Link>
            </Navbar>
        </HeaderElement> 
    );
}

export default Header;