import React from 'react';
import styled from 'styled-components';
import { Cart } from 'react-bootstrap-icons';
import { Link } from 'react-router-dom';

import MainSearchInput from './MainSearchInput';
import Logo from './Logo';
import Container from './Container';
import { screen } from '../styles/screen';

const Links = styled.div`
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`;
const Wrapper = styled(Container)`
    display: grid;
    align-items: center;
    grid-template-columns: 2fr min-content;
    grid-template-areas:
        'logo links'
        'search search';

    ${Logo.Wrapper} {
        grid-area: logo;
    }
    ${Links} {
        grid-area: links;
    }

    ${MainSearchInput.Wrapper} {
        grid-area: search;
        grid-column: span 2;

        ${screen.md} {
            grid-column: span 1;
        }
    }

    ${screen.md} {
        grid-template-columns: min-content 1fr min-content;
        grid-template-areas: 'logo search links';
        grid-gap: 0 20px;
    }

    a,
    a:visited {
        color: #3e4457;
        font-size: 18px;
        font-weight: 500;

        &.login {
            margin-right: 20px;
        }
        &.cart {
            font-size: 28px;
        }
    }
`;

function TopBar() {
    return (
        <Wrapper>
            <Logo />
            <MainSearchInput />
            <Links>
                <Link className="login" to="/login">
                    Entrar
                </Link>
                <Link className="cart" to="/cart">
                    <Cart />
                </Link>
            </Links>
        </Wrapper>
    );
}

export default TopBar;