---
import { Icon } from 'astro-icon/components';
import type { NavLink } from 'src/types';

const { pathname } = Astro.url;

interface Props {}

const navLinks: NavLink[] = [
	{ label: 'Blog', icon: 'pen', path: '/' },
	{ label: 'About', icon: 'person', path: '/about/' },
	{ label: 'Now', icon: 'clock', path: '/now/' },
];
---

<header>
	<h1>ghall.blog</h1>
	<nav>
		<ul>
			{
				navLinks.map((link) => (
					<li>
						<a
							class={pathname === link.path ? 'active-nav' : null}
							href={link.path}
						>
							<Icon size={26} name={link.icon} />
							<span>{link.label}</span>
						</a>
					</li>
				))
			}
		</ul>
	</nav>
</header>

<style>
	header {
		margin: 0;
		padding: 1.5rem 1rem;
		max-width: 800px;
		display: flex;
		flex-direction: column;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}

	h1 {
		text-align: center;
		font-size: 1.8rem;
	}

	.title {
		text-decoration: none;
	}

	nav ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		padding: 0;
		margin: 0;
	}

	nav ul li {
		height: 40px;
		align-items: center;
		margin: 0;
	}

	nav ul li a {
		position: relative;
		display: flex;
		gap: 0.5rem;
		align-items: center;
		text-decoration: none;
	}

	nav ul li a span {
		font-size: 1.2rem;
	}

	nav ul li a::before {
		content: '•';
		font-size: 1.6rem;
		position: absolute;
		left: -12px;
		color: var(--blue);
		opacity: 0;
	}

	nav ul li a:hover {
		text-decoration: none;
	}

	nav ul li a:hover::before {
		opacity: 0.6;
	}

	.active-nav::before {
		opacity: 1;
	}

	nav ul li::before {
		content: '';
	}
</style>