import Link from "next/link";
import { useRouter } from 'next/router';
import { Pane, Heading } from "evergreen-ui";

export default function Nav() {
	const router = useRouter();
	
	const isActive = (href) => {
		return router.pathname === href ? `active font-bold bg-slate-200 rounded-md` : '';
	  };
	return (
		<Pane display="flex">
			<Link href="/">
				<h2 className="px-2 place-self-center">
					<img src="logo.png" className="h-12" />
				</h2>
			</Link>
			<Link href="/">
				<h3 className={"px-3 py-2 place-self-end "+isActive('/')} style={{cursor: 'pointer'}}>Przekrój</h3>
			</Link>
			<Link href="/cross">
				<h3 className={"px-3 py-2 place-self-end "+isActive('/cross')} style={{cursor: 'pointer'}}>Siatka</h3>
			</Link>
			<Link href="/uziomy">
				<h3 className={"px-3 py-2 place-self-end "+isActive('/uziomy')} style={{cursor: 'pointer'}}>Uziomy</h3>
			</Link>
			{/* <Link href="/kontakt">
				<h3 className="px-3 py-2 place-self-end">Kontakt</h3>
	</Link> */}
		</Pane>
	);
}