import React, { memo } from "react";
import LogoWordMark from './LogoWorkMark';
import Link from "./Link";
import { css } from '@emotion/css';

const NavLinkClass = css({
    color: '#425a70',
    textTransform: 'uppercase',
    lineHeight: '16px',
    fontSize: 12,
    padding: '10px 12px',
    marginRight: 8,
    height: 36,
    display: 'inline-flex',
    alignItems: 'center',
    letterSpacing: '0.4px',
    borderRadius: '3px',

    ':hover': {
        backgroundColor: 'var(--N2A)'
    },
    ':last-child': {
        marginRight: 0,
    },
    ':focus-visible': {
        boxShadow: 'inset 0 0 0 2px var(--B6A)'
    }
})

const NavLinkActiveClass = css({
    backgroundColor: 'rgba(16, 112, 202, 0.09)',
    color: '#1070ca'
})

const TopBar = memo(({ children, ...props }) => {
    return (
        <header className={css({
            display: 'flex',
            alignItems: 'center',
            flexShrink: 0,
            justifyContent: 'space-between',
            position: 'relative',
            height: 56,
            paddingLeft: 16,
            paddingRight: 16,
            backgroundColor: '#FFFFFF',
            boxShadow: 'var(--elevation-1)'
        })} {...props}>
            <Link
                href="/"
                linkName={<LogoWordMark />}
                className={css({
                    display: 'block',
                    marginRight: 34,
                    marginLeft: 8
                })}
            />
            <nav className={css({
                alignItems: 'center',
                display: 'flex',
                flexGrow: 1,
                minWidth: 0,
                height: 'inherit'
            })}>
                <Link
                    href="/brand"
                    linkName="Brand"
                    className={NavLinkClass}
                    activeClassName={NavLinkActiveClass}
                />
                <Link
                    href="/foundations"
                    linkName="Foundations"
                    className={NavLinkClass}
                    activeClassName={NavLinkActiveClass}
                />
                <Link
                    href="/components"
                    linkName="Components"
                    className={NavLinkClass}
                    activeClassName={NavLinkActiveClass}
                />
            </nav>
        </header>
    )
})

export default TopBar