import { useLanguage } from "../language/context";
import styled from "styled-components";

const Navbar: React.FC = () => {
    const { $ } = useLanguage();

    return <Nav>
        <Heading>{$.tr("hero")}</Heading>
        <div>
            <Link href="#">{$.tr("navbar.start")}</Link>
            <Link href="#about">{$.tr("navbar.about")}</Link>
            <Link href="#music">{$.tr("navbar.music")}</Link>
            <Link href="#contact">{$.tr("navbar.contact")}</Link>
            <Link href="#links">{$.tr("navbar.links")}</Link>
            <Link href="#tools">{$.tr("navbar.tools")}</Link>
        </div>
    </Nav>
};

const Nav = styled.div`
    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-between;
    transition: 0.1s ease-in-out;
    padding: 0 1.5rem;

    z-index: 10;
    color: ${({ theme }) => theme.text};
    background: ${({ theme }) => theme.secondary};
    border-bottom: 1px solid ${({ theme }) => theme.text};
    box-shadow: 0 0.6rem 1.8rem -0.3rem ${({ theme }) => theme.primary};

    >:last-child {
        display: flex;
        align-items: center;
        gap: ${({ theme }) => theme.gap};
    }
    
    @media screen and (max-width: 978px) {
        padding: 0.5rem 0.25rem;

        >:first-child { display: none; }
        >:last-child { 
            overflow-y: auto;
        }
    }
`;

const Link = styled.a`
    border: 1px solid ${({ theme }) => theme.border};
    color: ${({ theme }) => theme.text};

    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    transition: 0.1s ease-in-out;
    text-decoration: none;
    white-space: pre;
    cursor: pointer;

    &:hover {
        background: ${({ theme }) => theme.text};
        color: ${({ theme }) => theme.secondary};
        box-shadow: 0 0 5px ${({ theme }) => theme.text};
    }
`;

const Heading = styled.h1`
    font-family: "Pacifico", serif;
    margin: 0;
`;

export default Navbar;