---
const { currentPage, title, href } = Astro.props;
---

<style>
    .nav-link {
        transition: color 0.2s;
    }
    .nav-link:hover {
        color: var(--ayu-accent);
    }
</style>

<a
    href={href}
    class={`nav-link ${currentPage.path === href ? "text-ayu-accent font-bold" : ""}`}
    >{title}</a
>
