---
interface Props {
	href: string;
	lizard?: string; //question mark is for optional arguments
}

let { href, lizard } = Astro.props;
// (is the same as)
// let href = Astro.props.href
// let lizard = Astro.props.lizard

const linkUrl = new URL(href, Astro.url)
// if href = "/posts"
// then, linkUrl.toString() = "http://localhost/posts"

const isLinkActive = linkUrl.toString() === Astro.url.toString()
---

<a href={href} class:list={{ active: isLinkActive }}><slot></slot></a>

<style>
	a.active {
		color: red;
		font-weight: bold;
	}
</style>