import { useRouter } from 'next/router'
import NextLink from 'next/link'
import React from 'react'
import { css } from '@emotion/css';

type Props = {
    href: string
    label: React.ReactNode
}

const defaultClass = css({
    height: 32,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    position: 'relative',
    backgroundColor: '#f5f6f7',
    width: '100%',
    color: '#425a70',
    paddingLeft: 32,
    paddingTop: 8,
    paddingBottom: 8,
    paddingRight: 20,
    cursor: 'pointer',
    fontSize: 14,
    display: 'flex',
    boxSizing: 'border-box',
    userSelect: 'none',
    textDecoration: 'none',  
})

const linkClass = css({
    display: 'flex',
    width: '100%',
    padding: 8,
    margin: '2px -8px',
    color: '#425a70',
    borderRadius: 3,

    '&:hover': {
        color: '#425a70',
        backgroundColor: 'rgba(67,90,111,.06)'
    }
})

const activeLinkClass = css({
    color: '#1070ca',
    backgroundColor: 'rgba(16,112,202,.09)'
})

const Link: React.FC<Props> = ({ href, label }) => {
    const router = useRouter()

    let classes = `${linkClass} ${router.pathname === href ? activeLinkClass : ''}`.trim();

    return (
        <NextLink href={href}>
            <div className={defaultClass}>
                <a
                    className={classes}
                >
                    <div
                        
                    >
                        {label}
                    </div>
                </a>
            </div>
        </NextLink>
    )
}

export default Link